Передача переменной JS в другой JS и в представление django

У меня есть несколько карт с предметами. Я добавил счетчик в каждую карточку и кнопку "Добавить в корзину". Я хочу передать количество товаров в django view с помощью ajax. Но я не знаю, как передать переменную из счетчика в функцию ajax, для каждой карточки. Текущая версия работает некорректно, т.к. каждый раз count = 1.

var globalVariable;
var buttonPlus = $(".qty-btn-plus");
var buttonMinus = $(".qty-btn-minus");
var incrementPlus = buttonPlus.click(function() {
  var $n = $(this)
  .parent(".col")
  .find(".input-qty");
  $n.val(Number($n.val()) + 1);
  globalVariable = $(this).$n.val();
});

var incrementMinus = buttonMinus.click(function() {
  var $n = $(this)
  .parent(".col")
  .find(".input-qty");
  var amount = Number($n.val());
  1
  if (amount > 0) {
    $n.val(amount - 1);
    globalVariable = $(this).$n.val();
  }
});

$(document).ready(function() {
  $(".send-quantity").click(function() {
    var quantity = globalVariable;

    if (quantity === undefined) {
      quantity = 1;
    }
    var id = $(this).data("id");
    $.ajax({
      url: "{% url 'stripe_order:cart_add' %}",
      data: {
        'id': id,
        'quantity': quantity,
      },
    });
  });
});

Мой HTML:

{% for item in items %}
      <div class="col">
        <div class="card mb-4 rounded-4 shadow-sm">
          <div class="card-header py-3">
            <h3 class="my-0 fw-normal">{{ item.name }}</h3>
          </div>
          <div class="card-body">
            <h4 class="card-title pricing-card-title ">${{ item.price }}</h4>
            <ul class="list-unstyled mt-3 mb-4">
              <li>{{ item.description }}</li>
            </ul>
              <div class="row">
                <div class="col">
                  <div class="col input-group input-group-sm mb-3">
                      <button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
                      <input type="text" name="qty" value="1" class="input-qty form-control">
                      <button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
                  </div>
                </div>
                  <div class="col">
            <a data-id="{{ item.id}}" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
         </div>
          </div>
              </div>
        </div>
      </div>
    {% endfor %}

THX!

Вернуться на верх