Take the value of the "data-" attribute with jquery

Question

Good afternoon, I am doing an html + js activity (with jquery), I need to get the value of the attribute "date-" when the button is clicked. Follow the code:

html:

    <table id="table" class="table table-hover">
  <thead>
    <tr>
      <td>Foto</td>
      <td>Produto</td>
      <td>Descrição</td>
      <td>Tipo</td>
      <td>Alocação</td>
      <td>Quantitativo</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="http://localhost:7304/storage/img/aa76a3cbb48e4c85836f9464fca46e15.jpg" class="images" width="100px" height="100px"></td>
      <td>Luva</td>
      <td>feitos para usar individualmente</td>
      <td>EPC</td>
      <td>Prateleira 2/Linha 1</td>
      <td data-name="1"><button type="button" class="quantitative-btn">Ver Quantitativo</button></td>
    </tr>
    <tr>
      <td><img src="http://localhost:7304/storage/img/QIpAROTIjsoZZgxlDFaHRRgmQa1ndhNI6DUjg12M.jpeg" class="images" width="100px" height="100px"></td>
      <td>print</td>
      <td>345tyuiop</td>
      <td>EPC</td>
      <td>Prateleira 1/Linha 1</td>
      <td data-name="2"><button type="button" class="quantitative-btn">Ver Quantitativo</button></td>
    </tr>
  </tbody>
</table>

js:

$(() => {
  $(document).on('click', '.quantitative-btn', (e) => {
    e.preventDefault();
    var id = $(this).parent().parent().find('td').data('name');
    alert(id);
  });
});

When the button is clicked, it appears "null". How can I resolve this?

Answer 1

You can try:

$('.quantitative-btn').on('click', function(){
     var name = $(this).parent().data('name');
     alert(name);
});