title: How can I get data attribute value of clicked button?
body: <p>I want to get data attribute value of clicked button. I need to use it When I submit an ajax form. How can I get that ?</p>
  
  <p>My button (There are as many buttons as the number of products)</p>
  
  <pre><code>&lt;input value="Add To Cart" type="button" class="btn btn-success btn-sm btn-block add-to-card-button" data-id="{{$product-&gt;id}}" style="margin-bottom:10px"&gt;
  </code></pre>
  
  <p>Javascript codes;</p>
  
  <pre><code>const cartButton = document.getElementsByClassName('add-to-card-button');
  
  if (cartButton) {
      Array.from(cartButton).forEach(function(element) {
          element.addEventListener('click', addToCard);
      });
     }
  
  function addToCard() {
  
      $.ajax({
          url: "/auth/check",
          context: document.body,
          success: function(status){
             if (status === "Auth")
             {
                 addToCardForUsers();
             } else {
                 addToCardForGuests()
             }
          }
      });
  
  }
  
  function addToCardForUsers() {
  
      $.ajax({
          type: 'POST',
          url: "/cart/add-product/"+ cartButton.dataset.id,
          context: document.body,
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(){
                  if(countProduct.text() == null) {
                      countProduct.text(1);
                  } else {
                      countProducts =  Number(countProduct.text());
                      countProducts++;
                      countProduct.text(countProducts);
                  }              
                  Flash.success("Product succesfully added to your cart");
          }
      });
  }
  </code></pre>