JQuery:Selecting second element in case element with same ID exists

Question

I know it's not a good practice to use same id for different element , but in a case I am forced to use same id for two different elements ( which will be automatically generated in the original program)

I'm trying to select the second element with the same id ( or when scaling say , nth element ).

Is there a way to do this ?

I have created a code snippet here , that shows the problem.

 $("#btn").click(function(){ $("#test").css("background","blue"); }); 

 #test { height: 100px; width: 100px; border: 1px solid #ccc; margin:10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"> </div> <div id="test"> </div> <button id="btn">Click Me</button> 

Answer 1

You must not have duplicate ids but if you can not do that you can use Attribute Equals Selector [name=”value”] with :eq(index) . The :eq takes the index of element of the collection. You may also want to use background-color.

Live Demo

 $("[id=test]:eq(1)").css("background-color","blue");

Answer 2

Try using the data-id attribute instead since duplicate ids can produce unpredictable behaviour.

 $("#btn").click(function(){ $("[data-id='test']:eq(1)").css("background","blue"); }); 

 [data-id='test'] { height: 100px; width: 100px; border: 1px solid #ccc; margin:10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-id="test"> </div> <div data-id="test"> </div> <button id="btn">Click Me</button> 

Answer 3

$("#test:eq(1)").css("background-color","blue");