Pass JS variable to another JS and to django view

I have several cards with items. I added a counter to each card and a button 'Add to cart'. I want to pass the count of item into django view using ajax. But I dont know how to pass variable from counter to ajax function, for each card. The current version doesn't work correctly, cuz every time 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,
      },
    });
  });
});

My 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!

To get the quantity you can simply use closest('.card-body').find(".input-qty").val() which will return the current count where Add to Cart is clicked. Also, you don't need globalVariable as count value will be dynamically fetched.

Demo Code :

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

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

$(document).ready(function() {
  $(".send-quantity").click(function() {

    var quantity = $(this).closest('.card-body').find(".input-qty").val(); //get quantity

    if (quantity === undefined) {
      quantity = 1;
    }
    var id = $(this).data("id");
    console.log('id - ' + id + ' | count - ' + quantity);
    //ajax call--
  });
});
.send-quantity {
  color: green
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="col">
  <div class="card mb-4 rounded-4 shadow-sm">
    <div class="card-header py-3">
      <h3 class="my-0 fw-normal">XYZ</h3>
    </div>
    <div class="card-body">
      <h4 class="card-title pricing-card-title ">$20</h4>
      <ul class="list-unstyled mt-3 mb-4">
        <li>something something..</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="1" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card mb-4 rounded-4 shadow-sm">
    <div class="card-header py-3">
      <h3 class="my-0 fw-normal">XYZ 2</h3>
    </div>
    <div class="card-body">
      <h4 class="card-title pricing-card-title ">$22</h4>
      <ul class="list-unstyled mt-3 mb-4">
        <li>something something..</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="2" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card mb-4 rounded-4 shadow-sm">
    <div class="card-header py-3">
      <h3 class="my-0 fw-normal">XYZ 3</h3>
    </div>
    <div class="card-body">
      <h4 class="card-title pricing-card-title ">$25</h4>
      <ul class="list-unstyled mt-3 mb-4">
        <li>something something..</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="3" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
</div>

Back to Top