如何使用jquery ajax在循环中提交表单

Question

我尝试在没有jquery Ajax的情况下提交表单，并且它运行得非常好。但是当我应用jquery Ajax时，它只提交循环中的第一个表单。我试过给他们一个不同的身份，但它仍然无法正常工作。我不知道我是否错过了某个地方。请帮帮我。这是我的PHP代码，包含表单。

<?php
$i = 0;
while($row = $products->fetch(PDO::FETCH_ASSOC)){
$image = $row['productimage'];
$price = $row['productprice'];
$id = $row['productid'];
$name = $row['productname'];
echo '<form method="post" class="cart" id="form'.$i.'">';
echo '<div class="col-sm-3">';
echo '<div class="product-image-wrapper">';
echo '<div class="single-products">';
echo '<div class="productinfo text-center">';
echo '<img src="'.$image.'" />';
echo '<input type="hidden" name="amount" value=1>';
echo '<input id="input" class="price" name="price" value="'.$price.'" 
readonly>';
echo '<input type="hidden" name="productid" value="'.$id.'">';  
echo '<p>'.$name.'</p>';
echo '<input name="submit"  class="btn btn-default add-to-cart" name="addto"   
type="submit" value="Add to cart">
</div></div>
</div>
</div>
</form>';
$i++;               
};
?>

这是我的jquery Ajax脚本

$(document).ready(function(){
$(".cart").on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'cartprocess.php', 
type: "POST",
data: $(this).serialize(),
success: function(data){
$("#error").html("Updating...").delay(1000).fadeOut(1000, function(){
$("#error").fadeIn(1000).html("updated!");
});
},

});
});
});