JavaScript — Как считать данные нужного объекта?

Question

[Dev_nab]

Когда товар ОДИН все идет отлично, данные считываются, все работает.
Но когда товаров много (список товаров), данные считываются только у ПЕРВОГО (в списке) товара.

Напр., если товаров в списке 3, то в JS данные ПЕРВОГО товара просто повторяются 3 раза.
На странице браузера:
Имя товара 1.
ID: 1
Добавить в корзину
----
Имя товара 2.
ID: 2
Добавить в корзину
----
Имя товара 3.
ID: 3
Добавить в корзину
---

В консоли JavaScript будет:
{product_id: "1"}
{product_id: "1"}
{product_id: "1"}

И только ПЕРВАЯ кнопка "Добавить в корзину" запускает JavaScript, остальные нет.

HTML

{% for product in products %}
{{ product.name }}
ID: {{ product.id }}

<form id="form_buying_product" action="/shop/cart/ajax/update_basket/" method="post">
    <input id="value_product_id" type='hidden' value='{{ product.id }}' />
    {{ cart_product_form }}
    {% csrf_token %}

    <button type="submit">Добавить в корзину</button>
</form>

{% block javascript %}
// тут код JS (см. ниже)
{% endblock %}

{% endfor %}

JavaScript

$(document).ready(function() {
    var data = {};
    var frm = $('#form_buying_product');
    var pr = $('#value_product_id');
    var csrf_token = $('#form_buying_product [name="csrfmiddlewaretoken"]').val();
    data["csrfmiddlewaretoken"] = csrf_token;
    data["product_id"] = pr.attr('value');
    console.log(frm);
    console.log(data);
     <...>
});

Как сделать, чтобы при нажатии на кнопку "Добавить в корзину", считывались данные именно этого товара?

Answer 1

[Владлен Хеллсайт]

#ID может быть только один на страницу, вместо этого используйте классы!

<form class="form_buying_product" action="/shop/cart/ajax/update_basket/" method="post">
    <input class="value_product_id" type='hidden' value='{{ product.id }}' />
    {{ cart_product_form }}
    {% csrf_token %}

    <button type="submit">Добавить в корзину</button>
</form>

$(function(){
    $(document.body).on('click', '.form_buying_product button', function(e) {
        e.preventDefault();

        const $this = $(this);
        const $form = $this.parent('form');

        const productId = $form.find('.value_product_id').val();
        const token = $form.find('input[name="csrfmiddlewaretoken"]').val();

        const data = {
            product_id: productId,
            csrfmiddlewaretoken: token
        };
        
        console.log('Product data', data);
    })
});

Comments

[yanis_kondakov]

А еще лучше атрибут data

[Dev_nab]

Спасибо, все работает.