how to convert AddToCart button in pluse & minus button in Django

Using Django
1

I want to convert my AddToCart button into plus & minus after adding a product to the cart and convert plus & minus button into AddToCart after deleting a product from Cart. I make a basic cart but now I want to make a perfect cart like Zomato, Dominos, and many other Online food delivery websites.

And also update the cart after increasing and decreasing Quantity.

And also want to update the cart.

views.py

from django.shortcuts import render, redirect, HttpResponse, reverse
import json
from django.http import JsonResponse
from django.template.loader import render_to_string
from django.views import View
from onlinePizza.models import Product

def add_to_cart(request):
    cart_p={}
    cart_p[str(request.GET.get('id'))]={
        'title':request.GET.get('title'),
        'qty':request.GET.get('qty'),
        'price':request.GET.get('price'),
    }
    if 'cartdata' in request.session:
        if str(request.GET.get('id')) in request.session['cartdata']:
            cart_data=request.session['cartdata']
            cart_data[str(request.GET.get('id'))]['qty']=int(cart_p[str(request.GET.get('id'))['qty']])
            cart_data.update(cart_data)
            request.session['cartdata']=cart_data
        else:
            cart_data=request.session['cartdata']
            cart_data.update(cart_p)
            request.session['cartdata']=cart_data
    else:
        request.session['cartdata']=cart_p
    return JsonResponse({'data':request.session['cartdata'], 'totalitems':len(request.session['cartdata'])})


def delete_from_cart(request):
    p_Id=str(request.GET['id'])
    if 'cartdata' in request.session:
        if p_Id in request.session['cartdata']:
            cart_data=request.session['cartdata']
            del request.session['cartdata'][p_Id]
            request.session['cartdata']=cart_data
    total_amt=0
    for p_id,item in request.session['cartdata'].items():
        total_amt+=int(item['qty'])*float(item['price'])
    tamplate=render_to_string('cart/pc_cart.html', {"cart_data":request.session['cartdata'], 'totalitems':len(request.session['cartdata']),})
    return JsonResponse({'data':tamplate, 'totalitems':len(request.session['cartdata'])})

HTML for cart:

<!-- CART -->
<div class="col-4" style="margin-top: 150px">
    <div class="position-fixed d-flex flex-column flex-shrink-0 p-3 border mb-5 " style="width: 380px; height: 380px; border-radius: 10px; box-shadow: 1px 1px 2px #000000; background-color: #ffff; overflow-y: scroll;">
        <a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <h2 class="text-center">Your Basket</h2>
        </a>
        <hr>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Item</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Total</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                {% for product_id,item in cart_data.items %}
                <tr>
                    <td>{{item.title}}</td>
                    <td>{{item.qty}}</td>
                    <td>₹ {% widthratio item.price 1 item.qty %}.0</td>
                    <td><button class="main-btn delete-item p-0" data-item="{{product_id}}"><i class="fa-solid fa-trash" style="color: red;"></i></button></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% if totalitems %}
    <div class="position-fixed" style="bottom:40px;">
        <a href="{% url 'Checkout' %}" class="main-btn" style="padding: 5px 0px;  width: 381px;">
            <span class="badge" style="font-size: 15px; background-color: #00a149; margin-right: 90px; margin-left: 9px; ">Item <span class="cartQty">{{totalitems}}</span> </span>
            Checkout
            <span class="" style="margin-left: 50px; margin-right: 9px;">₹ {{total_amt}}</span>
        </a>
    </div>
    {% endif %}
</div>
<!--//Cart-->

cart.js:

$(document).ready(function(){

    // AddToCart
    $(document).on('click', '.cart-btn',  function(){
        var _vm=$(this);
        var _index=_vm.attr('data-index')
        var _qty=$('.productQty-'+_index).val()
        var _productId=$('.product_id-'+_index).val()
        var _productTitle=$('.product_title-'+_index).val()
        var _productPrice=$('.product_price-'+_index).val()
        // Ajex
        $.ajax({
            url:'/cart/addtocart',
            data:{
                    'id':_productId,
                    'qty':_qty,
                    'title':_productTitle,
                    'price':_productPrice
                },
            dataType:'json',
            beforeSend:function(){
                _vm.attr('disabled', true);
            },
            success:function(res){
                $('.cartQty').text(res.totalitems)
                _vm.attr('disabled', false);
            },
        });
    });
    // End

    // Delete item from cart
    $(document).on('click', '.delete-item', function(){
        var _pId=$(this).attr('data-item');
        var _vm=$(this);
        // Ajex
        $.ajax({
            url:'/cart/deleteformcart',
            data:{
                    'id':_pId,
                },
            dataType:'json',
            beforeSend:function(){
                _vm.attr('disabled', true);
            },
            success:function(res){
                $('.cartQty').text(res.totalitems)
                _vm.attr('disabled', false);
                $('#cartlist').html(res.data)
            },
        });
    });
    // End

});

I hope so this code is helpful for answer my question.