Javascript 如何使用Jquery在一个页面上的多个div中获取表单中的数据

我在一个div中显示来自数据库的数据。显示的div的数量取决于数据库记录。每个div都有一个包含隐藏输入和提交按钮的表单。当我单击提交按钮时，我应该只从该div的隐藏输入中获取数据。问题是我只从第一个div获取数据

html

<div class="col-md-4 col-sm-4" th:each="product : ${products}">
        <!--card -->
        <div class="card" style="margin-bottom: 10px;">
            <span th:if="${products.empty}" style="color: #0e4377">No Products Available</span>
            <!-- Card image -->
            <div class="view overlay">
                <img class="card-img-top"  alt="productImage" th:attr="src=${product.image}" height="100px" width="50px" >
            </div>
            <!-- Card image -->

            <div class="card-body" >
                <!-- Title -->
                <h4 class="card-title" th:text="${product.name}"></h4>
                <!-- Text -->
                <span>
                    <i class="fas fa-dollar-sign"></i>
                    <p class="card-text" th:text="${product.price}">$</p>
                </span>

                <!--button container-->
                <div class="button-container" >
                    <!-- Button -->
                <form  action="#" th:object="${Product}" method="POST" >
                    <input type="hidden" th:value="${product.id}" name="id" class="id"/>
                    <input type="hidden" th:value="${product.name}" name="name" class="name"/>
                    <input type="hidden" th:value="${product.image}" name="image" class="image"/>
                    <input type="hidden" th:value="${product.price}" name="price" class="price"/>
                    <input type="hidden"  th:value="${session.userId}" name="userId" class="userId"/>
                <button type="submit" class="btn btn-info btn-sm" onclick="addToCart();">Add</button>
                </form>

                </div>
                <!--button container-->
            </div>

        </div>
    </div>

没有可用的产品
$
添加

js

<script>

    function addToCart() {
      var id = $(".id").val();
      var name = $(".name").val();
      var price = $(".price").val();
      var userId = $(".userId").val();

      var select = {
          id: id,
          name: name,
          price:price,
          userId:userId
      };

      alert(select.price);
    }

</script>

函数addToCart（）{
var id=$（“.id”）.val（）；
var name=$（“.name”）.val（）；
var价格=$（“.price”）.val（）；
var userId=$（“.userId”）.val（）；
变量选择={
id:id，
姓名:姓名,，
价格：价格，
userId:userId
};
警报（选择价格）；
}

尝试传递关键字此

<button type="submit" class="btn btn-info btn-sm" onclick="addToCart(this);">Add</button>

---

我做了很多搜索，得到了这个完美的解决方案

 var items;
$(document).on('click', '.btn-info', function(e) {
    e.preventDefault();
    items ={
        name: $(this).closest('.button-container').find('.name').val()
    };
    alert(items.name);
})

---

抱怨在函数addToCart（this）{}中使用此函数-表示需要正式的参数名

 var items;
$(document).on('click', '.btn-info', function(e) {
    e.preventDefault();
    items ={
        name: $(this).closest('.button-container').find('.name').val()
    };
    alert(items.name);
})