jQuery code not working when the second add to cart button is clicked

Question

I have created a product page for my website. When I Clicked the First Add to Cart the jQuery code works perfectly. but when the second Add to Cart is clicked, then the jQuery code is not working.

This is the image of the product page:

enter image description here

<?php 
   $query = 'SELECT * FROM `products` order by product_id DESC';
   $result = mysqli_query($conn,$query);
   while ($row = mysqli_fetch_array($result)) {?>
<div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
   <!-- Block2 -->
   <div class="block2" id="image">
      <div class="block2-img wrap-pic-w of-hidden pos-relative block2-label">
         <img src="<?php echo $base_url .'pages/Ajax/'.$row['product_img1']; ?>" alt="IMG-PRODUCT">
         <div class="block2-overlay trans-0-4">
            <a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
            <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
            <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
            </a>
            <div class="block2-btn-addcart w-size1 trans-0-4">
               <!-- Button -->
               <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" id="add_cart">
               Add to Cart
               </button>
            </div>
         </div>
      </div>
      <input type="text" value="<?=$row['product_id'];?>" name="hiddenID" id="hiddenID">
      <input type="text" value="<?=$row['product_title'];?>" name="name" id="name"><input type="text" value="<?=$row['product_price'];?>" name="price" id="price">
      <div class="block2-txt p-t-20">
         <a href="product-detail.php?id=<?=$row['product_id'];?>" class="block2-name dis-block s-text3 p-b-5">
         <?php echo $row['product_title']; ?>
         </a>
         <span class="block2-price m-text6 p-r-5">
         $<?php echo $row['product_price']; ?>
         </span>
      </div>
   </div>
</div>
<?php } ?>

JQuery Code

<script>
$(document).ready(function(){
    $('#add_cart').on('click', function(e){
        e.preventDefault();
        var name = $('#name').val();
        var hiddenID = $('#hiddenID').val();
        var price = $('#price').val();
        alert(name);
        alert(hiddenID);
        alert(price);
});
});
</script>

Answer 1

Your button all have the same id.

Your need to use class or make the button id unique dynamically.

Like :

<button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" id="add_cart_<?php echo $row['product_id']?>">
Add to Cart
</button>

Then use jsquery

<script>
$(document).ready(function(){

    $('[id^="add_cart_"]').on('click',function(e) {

         var index = $(this).attr('id').split("_")[1]; //product ID of the clicked button
        e.preventDefault();
        var name = $('#name').val();
        var hiddenID = $('#hiddenID').val();
        var price = $('#price').val();
        alert(name);
        alert(hiddenID);
        alert(price);
});
});
</script>

Edit :

You can also add the product details on the button using the data attribute.

<button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" id="add_cart_<?php echo $row['product_id']?>" data-product="<?php echo $row['product_title']?>" data-price="<?php echo $row['product_price']?>">
Add to Cart
</button>

Then :

<script>
$(document).ready(function(){

    $('[id^="add_cart_"]').on('click',function(e) {
         e.preventDefault();
        var hiddenID = $(this).attr('id').split("_")[1]; //product ID of the clicked button

        var name = $(this).data('product');
        var price = $(this).data('price');
        alert(name);
        alert(hiddenID);
        alert(price);
});
});
</script>

Answer 2

The issue is because you're repeating the same id attributes in your loop. They need to be unique within the DOM. To fix this change them to classes. Then you will need to use DOM traversal to find inputs related to the button which was clicked. To do that you can use a combination of closest() and find(), like this:

$(document).ready(function() {
  $('.add_cart').on('click', function(e) {
    e.preventDefault();
    var $container = $(this).closest('.col-sm-12');

    var name = $container.find('.name').val();
    var hiddenID = $container.find('.hiddenID').val();
    var price = $container.find('.price').val();

    console.log(name);
    console.log(hiddenID);
    console.log(price);
  });
});

<?php 
$query = 'SELECT * FROM `products` order by product_id DESC';
$result = mysqli_query($conn,$query);
while ($row = mysqli_fetch_array($result)) {?>
  <div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
    <div class="block2 image">
      <div class="block2-img wrap-pic-w of-hidden pos-relative block2-label">
        <img src="<?php echo $base_url .'pages/Ajax/'.$row['product_img1']; ?>" alt="IMG-PRODUCT">
        <div class="block2-overlay trans-0-4">
          <a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
            <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
            <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
          </a>
          <div class="block2-btn-addcart w-size1 trans-0-4">
            <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4 add_cart">Add to Cart</button>
          </div>
        </div>
      </div>
      <input type="text" value="<?=$row['product_id'];?>" name="hiddenID" class="hiddenID">
      <input type="text" value="<?=$row['product_title'];?>" name="name" class="name"><input type="text" value="<?=$row['product_price'];?>" name="price" id="price">
      <div class="block2-txt p-t-20">
        <a href="product-detail.php?id=<?=$row['product_id'];?>" class="block2-name dis-block s-text3 p-b-5">
          <?php echo $row['product_title']; ?>
        </a>
        <span class="block2-price m-text6 p-r-5">
           $<?php echo $row['product_price']; ?>
           </span>
      </div>
    </div>
  </div>
<?php } ?>