Recovering multi id at a time

Question

I try to put in place a system popup, why I decided to use the data attribute.

I wish that when an element has the id "popup" I recovered using the jQuery data-item value.

The data-item value has the id to display in my popup, my problem is that if I have several id popup, recovered came only 1 single id, the first in this page.

How can I do to retrieve all the popup and display ID is the corresponding value with the data-item?

<div id="boxpop">
  <div class="centered">
    <span></span>
    <div class="close-btn"></div>
  </div>
</div>
<div id="login" style="display:none;">
  Test div
</div>

<header>
  <div id="MainHeader">
    <div class="logo"></div>
    <nav id="Menu">
      <li>
        <span class="icon"></span>
        <span class="text"><a href="#" id="popup" data-item="login">Click me!</a></span>
      </li>

      <li>
        <span class="icon icone card"></span>
        <span class="text"><a href="" id="popup" data-item="test">Shop info</a></span>
      </li>
    </nav>
  </div>
</header>

<script type="text/javascript">
  $("#popup").click(function() {
    a = $("#popup").data("item");
    alert(a);

  });

  function demo(div) {
      $("#boxpop").fadeIn(500);
      $("#boxpop .centered span").empty();
      $(div).insertAfter("#boxpop .centered span").fadeIn(100);
  }
</script>
  

Answer 1

ID must be unique.

You should use class for this, this is the correct way:

      <li>
        <span class="icon"></span>
        <span class="text"><a href="#" class="popup" data-item="login">Click me!</a></span>
      </li>

      <li>
        <span class="icon icone card"></span>
        <span class="text"><a href="" class="popup" data-item="test">Shop info</a></span>
      </li>

And then...

$(".popup").click(function() {
     a = $(this).data("item");
     alert(a);
});

Hope it helps.

Answer 2

The is is because cannot have multiple elements with the same id attribute in the same document - it's invalid HTML. You should use classes instead. From there you can use the this keyword in the click handler to reference the element which raised the event and read the data attribute. Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxpop">
  <div class="centered">
    <span></span>
    <div class="close-btn"></div>
  </div>
</div>
<div id="login" style="display:none;">
  Test div
</div>

<header>
  <div id="MainHeader">
    <div class="logo"></div>
    <nav id="Menu">
      <li>
        <span class="icon"></span>
        <span class="text"><a href="#" class="popup" data-item="login">Click me!</a></span>
      </li>

      <li>
        <span class="icon icone card"></span>
        <span class="text"><a href="" class="popup" data-item="test">Shop info</a></span>
      </li>
    </nav>
  </div>
</header>

<script type="text/javascript">
  $(".popup").click(function() {
    a = $(this).data("item");
    alert(a);
  });

  function demo(div) {
    $("#boxpop").fadeIn(500);
    $("#boxpop .centered span").empty();
    $(div).insertAfter("#boxpop .centered span").fadeIn(100);
  }
</script>