Multiple same ID's same page with jquery

Question

Before I start, I do understand that having the same ID one more than one element on one page is invalid but it's the best method I've come up with for dealing with this problem...

I have several generated tables on one page, each row of each table can be edited or removed with buttons per row. It's these buttons which I attach the ID so I can easily know what the ID of the object I'm editing/deleting is. This works well when saving to the database but causes a problem when I try to dynamically update the table row using JQuery.

Here's an example of the code from the edit button dialog save function:

//find the edit button so we can get the row this item is in
var editButton = $("#theTable").add("editButtonClass").add("#"+id);
var row = editButton.parents('tr:first');
//update the current page with new row data
row.find(":eq(0)").text(name);
row.find(":eq(1)").text(value);

This works fine if there is only one table on the page, but as there are many tables, some of which the buttons end up with the same IDs (I use auto increment in my db tables), this function will update the first row it finds with the ID, effectively ignoring my $("theTable").add("editButtonClass") selector!

Any ideas on this would be most helpful!

---

Info: I have also used the following selector to get the edit button and id, which works with one table but not with multiple tables with the same id:

var findButtonStr = "#" + id + ", editButtonClass";
var editButton = $(findButtonStr);
var row = editButton.parent().parent();

---

An example of what the generated table might look like:

<table id="theTable">
  <tr><td>name</td><td>value</td><td><a id="1" class="editButtonClass">Edit</a> / <a id="1" class="deleteButtonClass">Delete</a></td></tr>
  <tr><td>name</td><td>value</td><td><a id="2" class="editButtonClass">Edit</a> / <a id="2" class="deleteButtonClass">Delete</a></td></tr>
</table>

I might have several tables like this on one page which means there will be several rows with buttons that have the same id.

---

EDIT: Thanks for the downvote, Please. if you have an issue with the question then tell me and I will fix it.

Answer 1

If the buttons for edit/delete are contained within the row you want to perform actions on, why not just use $(this) within the button click event??

$('.editButtonClass .deleteButtonClass').click(function() {
    var $row = $(this).closest('tr');

    $(document).data('editRow', $row);
    // call dialog, have the dialog save code do this:
    //    var $row = $(document).data('editRow');
    // and then perform operations on $row
});

---

EDIT:

Get rid of the leading dot in your classes in your HTML code. class="editButtonClass" is what you want. Follow proper syntax!

Answer 2

in Jquery this selector

 $("#theTable").add(".editButtonClass")

Always return only the first object with that id. if you need to select more than one object. you must use other selectors. If you show us your full markup we might help you better

EDIT - looking at your markup this is what you need, i think

$('.\\.editButtonClass').click(function(){
   var name = $(this).closest('tr').find(":eq(0)");
    var value = $(this).closest('tr').find(":eq(1)");
   alert(name.html());  
   alert(value.html());
});

look at the fiddle here http://jsfiddle.net/UJGeP/1/ (name and value are the td you need, i alert their value to show that the correct td has been chosen)

Answer 3

Apart from the duplicates, I´m pretty sure that ID's cannot begin with a number either.

Anyway, why don´t you just use the data attribute, that seems the most appropriate in this case as you are not using it for any styling anyway.