Repeated IDs in an html document .. how bad an idea is it if they are scoped by a div with a unique ID?

Question

I have an webpage which shows a single item for sale with an add to basket button. The page makes use of alot of javascript to allow the user to customise the item.I now need to modify the page to show multiples of similar items on the same page, each additional item also customisable in the same way by the user. The javascript makes heavy use of id's in the markup to find elements and manipulate them to provide the client side item customisation.

My 1st thought is to allow the html markup to repeat for each item,also allowing the IDs to repeat themselves but add an additional div with a unique ID around each items markup to separate the scope of the repeated ID's , making the repeated ID's unique within the containing div. This should allow the javascript to stay relatively the same with the exception that any references to repeated ID's will need to be scoped for a particular DIV ID

Bearing in mind I want the outcome to be cross browser compatible , IE6 -IE9 , Firefox 3+ , Chrome, Safari, Opera, how sensible does this approach sound? Will some browsers disallow repeated IDs or behave badly with them? Any advice as to a better approach or things I should look out for would be very welcomed. Thanks

-----------------addendum----------------------------------------------------------------

It seems the overwhelming consensus is that it's a really really bad idea to repeat ID's mostly because the standards say id's should be unique and although some/most browsers support it now , there's no guarantee for the future. I agree with you all on this totally.

The class approach seemed to be the best route to take from the advice received but now it looks like older browsers won't support it, specifically IE6 and 7. Any advice on a way forwards from here?

-----------------addendum----------------------------------------------------------------

On balance getElementsByTagName seems to be the most compatible way forwards , covering a good spectrum of mobile browsers too.

Thanks for all your advice.

Answer 1

Don't reuse id's. Ever. It results in very unexpected behavior. If you need to reuse markers then make use of classes instead.

If you have the following syntax

<div id="container1"><span id="a"></span></div>
<div id="container2"><span id="a"></span></div>

What would you expect document.getElementById('a') to do?

Instead use:

<div id="container1"><span class="a"></span></div>
<div id="container2"><span class="a"></span></div>

Then you can access them via.

document.getElementsByClassName('a')