Is it normal to have two elements with same id in two div elements with other id?

The big reason is for JavaScript DOM manipulation. In your case, if you do something like this...

document.getElementById("loading")

... JavaScript will return the first element, and the first element only. You'll have no way to access the rest of them without some serious DOM walking.


Change your id to class. It is not a good idea to give duplicate id.

Think two students having same roll no in a class. Imagine them getting examination result. How will the school be able to recognise the marksheet?

Your way is not cross browser compatible, and will affect a lot while coding JavaScript, and posted form etc

You can get the same effect using class

see

<div id="div1">
     <img class="loading" />
</div>
<div id="div2">
     <img class="loading" />
</div>

and css:

#div1 .loading
{
    some style here...
}
#div2 .loading
{
    another style here...
}

Just because no-one else has posted it - the HTML spec, section on ID, which says:

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.


an id must (should) be unique!!

you will have troubles selecting it via JS in most browsers - better use class