Handle duplicate IDs on a page

Basic idea is to use $("[id=elemId]") to select all elements with same #elemId. Example also shows selecting a specific type of element and even nth index of ID as well nth index of a type of element.

by Sree K

HTML

<h2>Example of handling duplicate IDs</h2>

If you look at the <code>HTML</code>,  you will see that all the elements below this note use same <code>ID</code>.  Though it is not a good practice to use duplicate <code>ID</code>,  this fiddle exists for academic purposes. Used a bit of <code>jQuery</code> to prove the point. 
    <br /><br />

    <div id="myId" class="">DIV 1; 1st element</div>
    <div id="myId">DIV 2; 2nd element</div>
    <div id="myId">DIV 3; 3rd element</div>
    <div id="myId">DIV 4; 4th element</div>

    <p id="myId">PARAGRAPH 1; 5th element</p>

    <span id="myId">SPAN 1; 6th element</span>

    <a id="myId" href="#">ANCHOR 1; 7th element</a>

    <span id="myId">SPAN 2; 8th element</span>
    <span id="myId">SPAN 3; 9th element</span>
        <br /><br />

    <button id="trigger">Select all</button>
    <button id="third">Select 3rd</button>
    <button id="anchor">Select anchor</button>
    <button id="span">Select 2nd span</button>

CSS

html{
    font-family: Arial;
    font-size: 14px;
}
div, p, span, a{
    font-style:italic;
    margin-left: 20px;
    display: inline-block;
}
div, p, span{
    color: #5D565F;
}
.highlight{
    color: #292B3E;
    font-weight: bold;
    background-color: #FF8A5D
}
.single{
    background-color: #B8B049;
    color: #292B3E;
    font-weight: bold;
}

JavaScript

$('#trigger').on("click", function(){
    $("[id=myId]").toggleClass("highlight");
});

$('#third').on("click", function(){
    $("[id=myId]:eq(2)").toggleClass("single");
});

$('#anchor').on("click", function(){
    $("a[id=myId]").toggleClass("single");
});

$('#span').on("click", function(){
    $("span[id=myId]:eq(1)").toggleClass("single");
});