JQuery не работает должным образом с ajax запросом в django

Question

Я создаю корзину (плюс, минус и пересчитываю итоги), где я использую ajax и jquery. Он работает правильно только в одной кнопке, то есть плюс или минус. Иногда кнопку минус делают наоборот, что увеличивает номер корзины. Я не знаю, где находится ошибка и что вызывает эту ошибку. Иногда он обновляется с сервера и внезапно останавливается и работает только в HTML, не обновляя серверные части. Я новичок с ajax и просто следую некоторой скрипке для этой работы. Вот код реализации jquery и ajax ............

<!-- templates/products/shopping-cart.html -->
{% extends 'base.html' %}


{% block jquery %}


var taxRate = 0.15;
var shippingRate = 20.00;
var fadeTime = 300;


function updateCart(item, qty, del){
  var url = "{% url 'create_cart' %}" + '?' + 'item=' + item + '&qty=' + qty;
  if(del === true){
    url += '&delete=y';
  }
  <!-- XHR object or ajax method.Inside this there is a javasctipt object -->

  return $.ajax({
    <!-- This is the URL of the call back function on the server. Remember the view function we created? {% url 'create_cart' %} This code will call that function without reloading the page. -->
    url: url,
    <!-- Type key:It takes in the method of request that we will send. Here, XHR is sent over the GET request. -->
    type: 'GET', 
  }).promise();
}



$(document).ready(function() {
  recalculateCart();
});


//On click Plus button
$(document).ready(function() {
  $(".cart-qty-plus").click(function() {

    var $n = $(this)
      .parent(".button-container")
      .parent(".product-quantity")
      .find(".qty");

    var qty = $(this).val();
        if(!qty){
        return ;
        }
        var item = $(this).data('item-id');
        var self = $(this);
        updateCart(item, qty).then(function(response){
            console.log(response);
            $('.cart-count-badge').text(response.cart_count);
            self.parent().next().text(response.item_total);
            $('#cart-subtotal').text(response.cart_price);
        });

    $n.val(Number($n.val()) + 1);

    updateQuantity(this);
  });
});


// On click minus button
$(document).ready(function() {

  $(".cart-qty-minus").click(function() {
    var $n = $(this)
      .parent(".button-container")
      .parent(".product-quantity")
      .find(".qty");

    var qty = $(this).val();
    if(!qty){
    return ;
    }
    var item = $(this).data('item-id');
    var self = $(this);
    updateCart(item, qty).then(function(response){
      console.log(response);
      $('.cart-count-badge').text(response.cart_count);
      self.parent().next().text(response.item_total);
            $('#cart-subtotal').text(response.cart_price);
    });

    var amount = Number($n.val());
    if (amount > 1) {
      $n.val(amount - 1);

      updateQuantity(this);
    }
  });
});



// If removed button is clicked
$('.product-removal button').click(function() {
  removeItem(this);
});


<!-- recalculate cart function  -->

/* Recalculate cart */
function recalculateCart() {
  var subtotal = 0;

  /* Sum up row totals */

  $('.product').each(function() {
    subtotal += parseFloat($(this).children('.product-line-price').text());
    console.log(subtotal)

  });

  /* Calculate totals */

  var tax = subtotal * taxRate;
  var shipping = (subtotal < 300 ? shippingRate : 0);
  var total = subtotal + tax + shipping;
  console.log(total)

  /* Update totals display */
  $('.totals-value').fadeOut(fadeTime, function() {
    $('#cart-subtotal').html(subtotal.toFixed(2));
    $('#cart-tax').html(tax.toFixed(2));
    $('#cart-shipping').html(shipping.toFixed(2));
    $('#cart-total').html(total.toFixed(2));
    if (total == 0) {
      $('.checkout').fadeOut(fadeTime);
    } else {
      $('.checkout').fadeIn(fadeTime);
    }
    $('.totals-value').fadeIn(fadeTime);
  });
}


/* Update quantity */

function updateQuantity(quantityInput) {
  /* Calculate line price */

  var productRow = $(quantityInput).parent().parent().parent();
  var price = parseFloat(productRow.children('.product-price').text());
  console.log(price)
  var quantity = productRow.find(".qty").val();
  var linePrice = price * quantity;
  console.log(quantity,linePrice)

  /* Update line price display and recalc cart totals */

  productRow.children('.product-line-price').each(function() {
    $(this).fadeOut(fadeTime, function() {
      $(this).text(linePrice.toFixed(2));
      recalculateCart();
      $(this).fadeIn(fadeTime);
    });
  });
}

/* Remove item from cart */
function removeItem(removeButton) {
  /* Remove row from DOM and recalc cart total */
  var productRow = $(removeButton).parent().parent();
  productRow.slideUp(fadeTime, function() {
    productRow.remove();
    recalculateCart();
  });
}


{% endblock %}



{% block content %}

Здесь это HTML раздел

{% for cart_item in object.cartitem_set.all %}
              <div class="product">
                <div class="product-image">
                <img src="{{cart_item.item_image}}" alt="">
            </div>
            <div class="product-details">
              <div class="product-title">{{cart_item.item_name}}</div>
              <p class="product-description">Lorem ipsum dolor...</p>
            </div>
            <div class="product-price">{{cart_item.item_price}}</div>


            <div class="product-quantity">
              <div class="button-container">

                <button class="cart-qty-plus" data-item-id="{{cart_item.item.id}}" name="qty" type="button" value="{{cart_item.quantity}}">+</button>

                <input type="number" value="{{cart_item.quantity}}" min="1" class="qty" data-item-id="{{cart_item.item.id}}" disabled>

                <button class="cart-qty-minus"
                data-item-id="{{cart_item.item.id}}" name="qty" type="button" value="{{cart_item.quantity}}">-</button>

              </div>
            </div>

            <div class="product-removal" >
                <button data-item-id="{{cart_item.item.id}}" class="remove-product">
                    Remove
                </button>
            </div>
            <div class="product-line-price">{{cart_item.item_total}}</div>
          </div>
  {% endfor %}

          <div class="totals">
            <div class="totals-item">
              <label>Subtotal</label>
              <div class="totals-value" id="cart-subtotal">{{cart_item.cart_price}}</div>
            </div>
            <div class="totals-item">
              <label>Tax (5%)</label>
              <div class="totals-value" id="cart-tax">3.60</div>
            </div>
            <div class="totals-item">
              <label>Shipping</label>
              <div class="totals-value" id="cart-shipping">15.00</div>
            </div>
            <div class="totals-item totals-item-total">
              <label>Grand Total</label>
              <div class="totals-value" id="cart-total">90.57</div>
            </div>
          </div>