Custom template List Page duplicate <tr> id

[sangnandar]

I've just found out that custom template <tr> id is a duplicate so in List Page they have 2 <tr>'s with exactly the same id.
This would caused problems.

My case:
I need to hide certain row.
Startup script:
$("#r2_<tablename>").hide(); // supposed I want to hide rowindex 2

It's not working on the custom template <tr>. Instead, it works on the "real" <tr>. This behavior, as per specification, is correct. Whenever there are 2 elements of same id's within the DOM, the $(id) selector will pick the first element. And... there's no way to use $(id) selector to get the second element.

I did a working workaround using $(attribute) selector.
$("[id='r2_<tablename>']").hide(); // select both <tr>'s
But at the cost of performance since $(attribute) selector is expensive.

Another workaround would be to loose the {{{row_attrs}}} from <tr> and define it's own id like <tr id="myRow_{{{i}}}">.
But it will cost the built-in row styling.

It would be great to have different <tr >id on custom template, surely still with rowindex attached into it.

Thanks.

[kirondedshem]

the $(id) selector will pick the first element. And... there's no way to use $(id) selector to get the second element.

Correct me if am wrong but I though selectors pick all elements matching the selector criteria whether you have serached for a given class, attribute, names, ids element types or combinations of these.
For example If am on a list page which has a column for a filed called "ID" and I console log results of selector as below.
//I am seaching by dataname attribute
console.log($('[data-name="ID"]'));

NOTE: since there are more than one item matching this element the selector returns an arrary as seen in console log. Where if you apply a property on the whole selector it apply to all matching elements, For example calling hide like below.
//hide all selected elements
$('[data-name="ID"]').hide();

BUT If am interested in the second element I can still access it from the array passing the array index of the element in the selector like below
//Am using javascript here
$('[data-name="ID"]')[2].hidden = true;

[sangnandar]

$('#id') selector is differ from $('[attribute=...]') selector. The latter is slower (much slower) than the former. In fact $('#id') selector is the fastest amongst all and whenever possible I used to use $('#id') selector.

Also I did mention that:
sangnandar wrote:
$("[id='r2_<tablename>']").hide(); // select both <tr>'s
is a working workaround.

But this way it treats id as an attribute (which is more expensive) rather than an #id (the cheapest).

Yes, the array thing $(element)[0] should work on all selector type, except $('#id'). And it shouldn't. Because as per W3C specification it stated that:

"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."

So there's no way to use $('#id')[0]. And it should be none.