Multiple inputs with the same script

Question

I'm using x-editable plug-in for edit various elements on my App. I have one table, and there's a column that I need to make editable but for all rows.

This is my code:

JavaScript:

<script type="text/javascript">
  $(document).ready(function() {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';     

    $('#confirm_assistance').editable({
        url: '/post'
    });
});
</script>

HTML (only two rows of the table):

<tr class="gradeA">
        <td>Pepa Loraine</td>
        <td>No</td>
        <td>25</td>
        <td></td>
        <td></td>
        <td>1825€</td>
        <td>250.00€</td>
        <td>0.00€</td>
        <td>1575.00€</td>
        <td><a href="#" id="confirm_assistance" data-type="text" data-placement="right" data-title="Enter username" data-pk="22">0</a></td>
        <td>2014-05-13 00:29:29</td>
        <td>Ibiza Rent a Car </td>
    </tr>



    <tr class="gradeA">
        <td>Pepa Loraine</td>
<td>No</td>
        <td>25</td>
        <td></td>
        <td></td>
        <td>1825€</td>
        <td>250.00€</td>
        <td>0.00€</td>
        <td>1575.00€</td>
        <td><a href="#" id="confirm_assistance" data-type="text" data-placement="right" data-title="Enter username" data-pk="30">0</a></td>
        <td>2014-05-13 00:30:14</td>
        <td>Juan Del Árbol</td>
    </tr>

The first one works and i'm able to edit and send data to the server, but the next inputs doesn't work.

There's anyway to define in the same script multiple elements with the same id?

Answer 1

You can't have two elements with the same ID attribute. You'll need to use class instead

<script type="text/javascript">
  $(document).ready(function() {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';     

    $('.confirm_assistance').editable({
        url: '/post'
    });
});
</script> 

<tr class="gradeA">
                                <td>Pepa Loraine</td>
                        <td>No</td>
                                <td>25</td>
                                <td></td>
                                <td></td>
                                <td>1825€</td>
                                <td>250.00€</td>
                                <td>0.00€</td>
                                <td>1575.00€</td>
                                <td><a href="#" class="confirm_assistance" data-type="text" data-placement="right" data-title="Enter username" data-pk="22">0</a></td>
                                <td>2014-05-13 00:29:29</td>
                                <td>Ibiza Rent a Car </td>
                            </tr>



                            <tr class="gradeA">
                                <td>Pepa Loraine</td>
                        <td>No</td>
                                <td>25</td>
                                <td></td>
                                <td></td>
                                <td>1825€</td>
                                <td>250.00€</td>
                                <td>0.00€</td>
                                <td>1575.00€</td>
                                <td><a href="#" class="confirm_assistance" data-type="text" data-placement="right" data-title="Enter username" data-pk="30">0</a></td>
                                <td>2014-05-13 00:30:14</td>
                                <td>Juan Del Árbol</td>
                            </tr>

Answer 2

ID's must be unique. Here is a quote from a different response:

Yes, it must be unique. HTML4:

http://www.w3.org/TR/html4/struct/global.html

Section 7.5.2:

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

HTML5:

http://www.w3.org/TR/html5/elements.html#the-id-attribute

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Does ID have to be unique in the whole page?