jQuery retrieve multiple .attr() on page

Question

Newbie here - I know I'm missing something simple here.

The goal is to retrieve the orgid from this a href using the data-orgid attribute.

<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="111">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="222">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="333">Claim Your Listing</a>

I can retrieve the attribute for the first instance with the following jquery.

// Click - Claim Your Listing
$( "#orgAct-claim" ).click(function() {
    // Acquire orig from onClick attribute and set orgid.
    var orgid = $('#orgAct-claim').attr('data-orgid');
    alert(orgid);
});

Fiddle here: https://jsfiddle.net/riverecho/0b7vpyw4/

= = = = =

Taking this one step further, I can get the attribute to at least trigger for each instance by wrapping all instances in another id called #listings. However, each .click event always returns the first orgid of "111".

<div id="listings">
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="111">Claim Your Listing</a>
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="222">Claim Your Listing</a>
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="333">Claim Your Listing</a>
</div>

Fiddle here: https://jsfiddle.net/riverecho/w5eqguok/

= = = = =

How do I get this to set the var to the specific instance that I click on: 111, 222, or 333 respectively?

Answer 1

Having multiple elements with the same ID is not valid html according to the W3C specification.

When your CSS selector only has an ID selector, jQuery uses the native document.getElementById method, which returns only the first element with that ID.

If you have to select by duplicate ID, use an attribute selector:

$('a[id="orgAct-claim"]');

Please have a look at jQuery ID Selector.

So in your case, as Amit Joki suggested, you can use:

$('a[id="orgAct-claim"]').click(function() {
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
});

Answer 2

Firstly, ids should be unique. So don't have same ids. Use classes if you want. In this case however, you can use the this that gets passed in the callback as in:

$( "#orgAct-claim" ).click(function() {
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
});

Answer 3

Your IDs should always be unique, so I removed them. Also, you can use $(this) inside the click function to return the element that was clicked. Since you also likely don't want to go to the href specified in the anchor tag, I use an event.preventDefault() to stop that from happening.

$(function() {
  $(".claim").click(function(event) {
    // Acquire orig from onClick attribute and set orgid.
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
    event.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="claim" href="http://www.url.com" data-orgid="111">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" data-orgid="222">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" data-orgid="333">Claim Your Listing</a>