Как получить данные в форме в div среди множества div на странице по нажатию кнопки, используя Jquery

Question

Я отображаю данные из базы данных в 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>

Answer 1

Попробуйте передать ключевое слово это

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

и

function addToCart(this){
    var id = $(this).siblings(".id").val();

Answer 2

Я много искал и нашел это идеальное решение.

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