jquery affect all instances of a table id

Question

I have a table that's generated through php. Whenever "bob" is the name of the person who this data belongs to, I generate a tr id to denote that:

<tr id="0bob">...</tr>
  <td>...</td>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>

The data inside each of the tds inside of the trs is different, and the user has to select which of these rows they want, using this checkbox:

print "<input type=\"checkbox\" id=\"check\" data-border=\"$border\" data-z=\"$z\" data-x=\"$x\" data-pn=\"$pn\" value=\"\">";

Then, in my JavaScript, I have the following line which is supposed to dim all of these lines whenever one of the checkboxes in these trs is clicked.

var pn = this.dataset.pn;
var x = this.dataset.x;

//anytime a checkbox with the id 'check' is clicked, (this is every checkbox on the page)    
$('input[type="checkbox"][id="check"]').change(function() {
    $( "#" + x + PN ).fadeTo( "slow" , 0.7, function() { });
}

The code, in my mind, is accurate - I'm asking for any td with the id of 0bob to be faded to 70%. The issue is that while the code "works," it only fades the first instance of this, then stops, like so:

It always fades the first instance, (red in this example,) regardless of which color the user selects, (blue, pink, or yellow).

I also can't use a tr class because I'm already using the class to change other aspects of the formatting. What am I doing wrong here?

Answer 1

You must use class. Ids must be unique and the browser will get angry if you duplicate them. You can pass multiple classes as follows:

<element id="some-id" class="class1 class2 class3">

From JavaScript classes can be added or removed using classList. JQuery has https://api.jquery.com/addclass/ method.

Answer 2

You should be using data-* attribute since ID is meant to occur once in the document. You can however work around this limitation by using an attribute selector like $('[id=0bob]'). See for example http://jsfiddle.net/Lk7dqbp6/

Answer 3

Your problem is that id attributes must be unique.

And the browser does that: finds the first element with that id and stops there, as it should.

Using repeated ids is invalid HTML and must be avoided like plague.

There are many alternatives for this.

I will only write the HTML structure for this.

Solution 1: a data-* attribute

You already use those, so, just use another one!

<tr data-user="bob"></tr>

These were made with the goal of providing aditional data about an element.

Solution 2: another class

You can have multiple classes per element.

Just make sure they are separated by a space:

<tr class="user-bob another-class more classes"></tr>

This may be harder to use.

Solution 3: another id schema

If you have a primary key on your SQL, you can use it to identify the user:

<tr id="user_bob_0"></tr>
<tr id="user_bob_1"></tr>
<tr id="user_bob_2"></tr>

This may be a bad idea in some situations but it will have all the data ready to use without many troubles.

---

Outside the scope of the answer, you have another problem:

You have this code:

var pn = this.dataset.pn;
var x = this.dataset.x;

//anytime a checkbox with the id 'check' is clicked, (this is every checkbox on the page)    
$('input[type="checkbox"][id="check"]').change(function() {
    $( "#" + x + PN ).fadeTo( "slow" , 0.7, function() { });
}

You see the comment?

Same problem: non-unique ids...

For this one, you would be better off using classes.

Instead of

$('input[type="checkbox"][id="check"]')

You would use

$('input.check')

Or

$('.check')

This is the right way to do it.
Also, the performance gain will be HUGE!

Attribute selectors (like [type="checkbox"] and [id="check"]) are one of the slowest selectors!
The only selectors slower than these are the pseudo-element selectors (:before, :after, ::selection, ...).

You can read more here: Is CSS faster when you are specific?

You may be thinking that this won't affect jQuery, but it will.
jQuery uses document.querySelectorAll() which runs a CSS selector in the DOM to select Javascript objects. (When it fails or isn't available, jQuery uses other methods)

Imagine your jQuery looking for over 300 elements for the selector in each of them.
Now imagine a basic table with the classes, where a few elements are connected to an entry.
See the difference?

This is the difference between your code taking 200ms and 30ms (non-measured).