How to add item to cart using jquery?

Question

JavaScript

Hello! There was such a problem: There is a basket for an online store on jquery, but for some reason the same product is always added to it. That is, if I add a product to the cart from the individual product page, then everything is fine, it works as it should. But I have a product output on the main page of the store, and when I try to add a product from the main page, then regardless of the selected product, the same one is always added. Please tell me what is the problem?

The output of the product is done in a loop, the form for sending product information looks like this:

<form class="row g-3 form_buying_product" action="{% url 'basket_adding' %}">
{% csrf_token %}
    <div class="col-3">
        <input type="number" class="form-control number" name="number" min="1" value="1">
    </div>
    <div class="col-auto">
         <button type="submit" class="btn btn-warning submit_btn"
                                 data-product_id="{{ product_img.product.id }}"
                                 data-name="{{ product_img.product.title }}"
                                 data-price="{{ product_img.product.price }}"
         >в корзину</button>
    </div>
</form>

This is how an item is added to the cart:

$(document).ready(function(){
    var form = $('.form_buying_product');

    function basketUpdating(product_id, nmb, is_delete){
        var data ={};
        data.product_id = product_id;
        data.nmb = nmb;
        var csrf_token = $('.form_buying_product [name="csrfmiddlewaretoken"]').val();
        data["csrfmiddlewaretoken"] = csrf_token;

        if (is_delete){
            data['is_delete'] = true
        }

        var url = form.attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            cache: true,
            success: function (data) {
                if (data.products_total_nmb || data.products_total_nmb == 0){
                    $('#basket_total_nmb').text(data.products_total_nmb)
                    $('.basket-items ul').html("");
                    $.each(data.products, function(k, v){
                        $('.basket-items ul').append('<li>'+v.name+', '+v.nmb+' шт. '+' по '+v.price_per_item+' руб ' +
                      '<a class="delete-item" href="" data-product_id="'+v.id+'">X</a>'+
                        '</li>');
                    });
                }
            }
        })
    }
    form.on('submit', function(e){
        e.preventDefault();
        var nmb = $('.number').val();
        var submit_btn = $('.submit_btn');
        var product_id = submit_btn.data('product_id');
        var product_name = submit_btn.data('name');
        var product_price = submit_btn.data('price');

       basketUpdating(product_id, nmb, is_delete=false);

Answer 1

rewrite everything.
here is your html

<div class="row g-3 form_buying_product" >

    <div class="col-3">
        <input type="number" class="form-control number" name="number" min="1" value="1">
    </div>
    <div class="col-auto">
         <button type="submit" class="btn btn-warning submit_btn"
                                 data-product_id="{{ product_img.product.id }}"
                                 data-name="{{ product_img.product.title }}"
                                 data-price="{{ product_img.product.price }}"


         >в корзину</button>
    </div>
</div>

here is your js

$(document).ready(function(){
 
    function basketUpdating(product_id, nmb, is_delete){
        var data ={};
        data.product_id = product_id;
        data.nmb = nmb;
        var csrf_token ={% csrf_token %}; // тут я напрямую вставил токен
        data["csrfmiddlewaretoken"] = csrf_token;

        if (is_delete){
            data['is_delete'] = true
        }

         
        $.ajax({
            url: ajax_url ,
            type: 'POST',
            data: data,
            cache: true,
            success: function (data) {
                if (data.products_total_nmb || data.products_total_nmb == 0){
                    $('#basket_total_nmb').text(data.products_total_nmb)
                    $('.basket-items ul').html("");
                    $.each(data.products, function(k, v){
                        $('.basket-items ul').append('<li>'+v.name+', '+v.nmb+' шт. '+' по '+v.price_per_item+' руб ' +
                      '<a class="delete-item" href="" data-product_id="'+v.id+'">X</a>'+
                        '</li>');
                    });
                }
            }
        })
    }
    $(".submit_btn").on('click', function(e){
        e.preventDefault();
        var nmb = $(this).closest(".row").find('.number').val();
         var product_id = $(this).data('product_id');
        var product_name =  $(this).data('name');
        var product_price =  $(this).data('price');
   var ajax_url =  $(this).data('url');
       basketUpdating(product_id, nmb, is_delete=false);

essentially changed only
$(".submit_btn").on('click', function(e){
e.preventDefault();
var nmb = $(this).closest(".row").find('.number ').val();
var product_id = $(this).data('product_id');
var product_name = $(this).data('name');
var product_price = $(this).data('price' );
var ajax_url = $(this).data('url');
set this block to take information from a specific block and not the first one