I am trying to add product in to the cart using jQuery and AJAX. The situation is that I am getting more then 30 forms that are generated dynamically using foreach loop. after page loading i get product list but need to add only one product in to the cart , and dont want reload the page , so i am using AJAX. please help me how can i achieve this. 

Most important thing is when i tried without `<form>` tag , the value of productId always goes 1 because its the first value of id attribute, and saves product in to the cart whose id is one. So I am using `<form>`. 

**this is code (its a sample code) :** 

```
<form id="addToCartForm" action="" method="post">

    <input type="hidden" id="productId" value="${products.productid}">
    <button id="btnSubmit">Add to Cart</button>
</form>

<form id="addToCartForm" action="" method="post">

    <input type="hidden" id="productId" value="${products.productid}">
    <button id="btnSubmit">Add to Cart</button>

</form>

<form id="addToCartForm" action="" method="post">

    <input type="hidden" id="productId" value="${products.productid}">
    <button id="btnSubmit">Add to Cart</button>

</form>

```

I already tried lots of things, like `jquery.form.min.js`, but nothing is going on as according just i like want. 

please help. thnx in advance. 

**Edited**

**script.js:**

```
$(document).ready(function(){
     $(".addToCart").click(function(){

     $.post('addToCart.htm', {productId: $('input[type=hidden]#productIdId').val()},
         function(message){
         $("#message").html(message); 
         }
     );
    });
 });

```