jQuery id selector works only for the first element

Question

I have 3 buttons with same id, I need to get each button value when he\'s being clicked.

Answer 1

From my experience, if you use $('button#xyz') selector instead it will work. That's a hack, but it's still invalid HTML.

Answer 2

You can't have the same id because id is unique in page HTML. Change it to class or other attribute name.

$('attributename').click(function(){ alert($(this).attr(attributename))});

Answer 3

this also worked if you have multiple element with same id.

 $("button#xyz").click(function(){
  var xyz = $(this).val();
  alert(xyz);
 });

you can check HERE

Answer 4

ID means "Identifier" and is valid only once per document. Since your HTML is wrong at this point, some browsers pick the first, some the last occuring element with that ID.

Change ids for names would be a good step.

Then use $('button[name="xyz"]').click(function(){

Answer 5

Although changing the id's to a class is better, you can get all the elements with the same id using the attribute equals selector:

$('[id="xyz"]')

Or this to get only buttons with id xyz:

$('button[id="xyz"]')

Or divs with id xyz:

$('div[id="xyz"]')

etc.

Alternatively you could use the "Attribute Contains Selector" to get all elements with ids that contain "xyz":

$('[id*="xyz"]')

Of course, this means all elements with id that partially contain "xyz" will get selected by this.

Answer 6

I have 3 buttons with same id ...

You have invalid HTML, you can't have more than one element in a page with the same id.

Quoting the spec:

7.5.2 Element identifiers: the id and class attributes

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

Solution: change from id to class,

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

And the jQuery code:

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery :$(this).val() to get the value of the input.
});

But it works only for the first button

jQuery #id selector docs:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

If you look at the jQuery source you can see when you call $ with an id selecor-($("#id")), jQuery calls the native javascript document.getElementById function:

// HANDLE: $("#id")
} else {
    elem = document.getElementById( match[2] );
}

Though, in the spec of document.getElementById they didn't mention it must return the first value, this is how most of (maybe all?) the browsers implemented it.

DEMO