How to use data-attribute to pass values from database to jquery

Question

I have an issue passing values from a database to a modal pop up using data attribute.

My problem is the data-attribute value passes only one value whereas the edit button is in a php loop and should pick the value for each row.

Below is a part of my loop code:

<td>
  <p data-placement="top" data-toggle="tooltip" title="Edit">
    <a  href="<?php echo admin_url('admin.php?page=woocommerce_checkout&id=' . $query->id.'&status=update'); ?>"  
      class="btn btn-primary btn-xs updatesection"  
      data-title="Edit"
      data-toggle="modal"
      data-id="<?php echo $query->id ?>"
      data-target="#editbilling" 
      data-name="<?php echo $query->name; ?>">Edit</a>
  </p>
</td>

js

   $(document).on( "click", '#editbilling', function(e) {

     var data = $('.updatesection').data('name');
     alert(data);
   });

So I am testing the values passed through the data attribute by alerting it on javascript.

The problem is only the first id gets submitted for all the edit buttons in a loop carrying different ids instead of submitting different ids for each row in the database.

When I inspect the code on the browser I discover the data-attributes have the corresponding values from the database but they don't get submitted - only the first row gets submitted for all the edit buttons in the loop.

Can anyone find a fix to this please

Answer 1

I changed the id onclick to class and then used attr instead of data and it worked. Please check my solution below:

  $(document).on( "click", '.updatesection', function(e) {

  var data = $(this).attr('data-id');
   alert(data);
  });