Нет ответа на первый клик - JavaScript & Django

Question

Я новичок в Django, работаю на веб-сайте электронной коммерции и пытаюсь улучшить функции корзины. Я следую курсу на использование JavaScript для обновления товаров в корзине, как показано ниже. Если я нажал кнопку «добавить» или «удалить» на другой странице (например, в списке продуктов), все будет нормально. Однако, когда я попытался лизнуть кнопку «удалить» на странице корзины (где я могу видеть все продукты в корзине), все заработало нормально, так как в первый раз товар был удален из корзины. После этого я нажал кнопку, страница только что обновилась. Затем я щелкнул в другой раз, снова заработало. Это похоже на то, что после удаления первого элемента мне нужно щелкнуть два раза, чтобы удалить нужный элемент. Ниже мой код JavaScript, views.py и cart_home. html. Надеюсь, что кто-нибудь поможет пройти через это, я застрял на неделю ....

JavaScript

<script type="text/javascript">
      $(document).ready(function(){
        var productForm = $(".form-product-ajax") // id:#form-product-ajax
        productForm.submit(function(event){
          event.preventDefault();
          console.log("Form is not sending");
          var thisForm =$(this);
          var actionEndpoint = thisForm.attr('data-endpoint');

          var httpMethod = thisForm.attr('method');
          var formData = thisForm.serialize();

          $.ajax({
            url: actionEndpoint,
            method: httpMethod,
            data: formData,
            success: function (data) {
              console.log("success");
              console.log(data);
              console.log("Added:",data.productAdded);
              console.log("Removed:",data.productRemoved);
              var submitSpan = thisForm.find(".submit-span")
              if (data.productAdded) {
                submitSpan.html('<button  class="btn btn-danger btn-sm "  type="submit" name="remove">Remove</button>')
              } else {
                submitSpan.html('<button  class="btn btn-success btn-sm"  type="submit" name="Add">Add to Cart</button>')
              }
              var navbarCount = $(".navbar-cart-count")
              navbarCount.text(data.cartItemCount)
              var currentPath = window.location.href
              if (currentPath.indexOf("cart") != -1) {
                     refreshCart()
                 }
            },
            error: function (errorData) {
              console.log("error");
              console.log(errorData);
            }
          })
        })

        function refreshCart() {
          console.log("in current cart");
          var cartTable = $(".cart-table")
          var cartBody = cartTable.find(".cart-body")
          var productRows = cartBody.find(".cart-products")
          var currentUrl = window.location.href
          var refreshCartUrl ='api/carts'
          var refreshCartMethod="GET";
          var data={};
          $.ajax({
            url: refreshCartUrl,
            method: refreshCartMethod,
            data:data,
            success:function(data) {
              var hiddenCartItemRemoveForm = $(".cart-item-remove-form")

              if (data.products.length>0) {
                productRows.html("")
                i = data.products.length
                $.each(data.products,function (index,value) {
                  console.log(value);
                  var newCartItemRemove = hiddenCartItemRemoveForm.clone()
                  newCartItemRemove.css("display","none")
                  newCartItemRemove.find(".cart-item-product-id").val(value.id)
                  cartBody.prepend("<tr><th scope=\"row\">" + i +"</th><td><a href='" +value.url + "'>" + value.name +"</a>" + newCartItemRemove.html() + "</td><td>" + value.price + "</td></tr>")
                  i --
                })

                cartBody.find(".cart-subtotal").text(data.subtotal);
                cartBody.find(".cart-tax").text(data.tax);
                cartBody.find(".cart-total").text(data.total);
              }else {
                window.location.href = currentUrl;
              }
            },
            error:function(errorData) {
              console.log("error");
              console.log(errorData);
            }
          })
        }

      })
    </script>

Cart_home. html

{% extends "base.html" %}

{% block content %}
<h1>Cart</h1>

{% if cart.products.exists %}
<table class="table cart-table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Prodcut Name</th>
      <th scope="col">Product Price</th>
    </tr>
  </thead>
  <tbody class="cart-body">


    {% for product in cart.products.all %}
    <tr class='cart-products'>
      <th scope="row">{{forloop.counter}}
      <td><a href="{% url 'products:detail' slug=product.slug %}">{{product.name}}</a>
        {% include "carts/snippets/remove-product.html" with product_id=product.id%} </th>

      </td>
      <td>${{product.price}}</td>
    </tr>
    {% endfor %}
    <tr>
      <th colspan='2'></th>
      <td> <b>Subtotal : $</b><span class="cart-subtotal">{{cart.subtotal}}</span> </td>

    </tr>

    <tr>
      <th colspan='2'></th>
      <td> Tax : $<span class="cart-tax" >{{cart.tax}} </span></td>

    </tr>

    <tr>
      <th colspan='2'></th>
      <td> <b>Total : $</b><span class="cart-total">{{cart.total}} </span>  </td>

    </tr>

    <tr>
      <th colspan='2'></th>
      <td> <a class="btn btn-success" href="{% url 'carts:checkout' %}">Checkout</a> </td>

    </tr>





  </tbody>
</table>
<div class="cart-item-remove-form" style='display:none'>
  {% include "carts/snippets/remove-product.html" with product_id=product.id%}

</div>


{% else %}
<p class="lead">There is no porduct in your cart now! </p>
<p> <a class="btn btn-secondary" href="{% url 'products:list' %}">Go to check!</a> </p>
{% endif %}



{% endblock content %}

views.py

def cart_detail_api_view(request):
    cart_obj, new_obj = Cart.objects.new_or_get(request)
    products = [{
            "ud":x.id,
            "url":x.get_absolute_url(),
            "name":x.name,
            "price":x.price,
            }
    for x in cart_obj.products.all()]

    cart_data ={"products":products,"subtotal":cart_obj.subtotal,"total":cart_obj.total,"tax":cart_obj.tax()}
    return JsonResponse(cart_data)

def cart_update(request):
    product_id = request.POST.get('product_id')

    if product_id:
        try:
            product_obj = Product.objects.get(id=product_id)
        except Product.DoesNotExist:
            print("Show message to user, product does not exist")
            raise("Producr does not exist")
            return redirect("carts:home")
        else:
            cart_obj, new_obj = Cart.objects.new_or_get(request)
        if product_obj in cart_obj.products.all():
            cart_obj.products.remove(product_obj)
            product_added = False
        else:
            cart_obj.products.add(product_obj) # cart_obj.products.add(1)
            product_added = True
        request.session['cart_items'] = cart_obj.products.count()
        if request.is_ajax(): #Asynchronous JavaScript Anx XML / JSON(JaveScrtip Object Notation)
            print("Ajax request")
            json_data = {
                "productAdded":product_added,
                "productRemoved":not product_added,
                "cartItemCount":cart_obj.products.count()
            }
            return JsonResponse(json_data)
    return redirect("carts:home")