How to make each product have functioning plus minus button on my product page and add its price to the total amount?

I'm working on Ecommerce Website that sells Coffee and my problem is that the only working plus and minus button is the first coffee. The plus and minus buttons on the others are not functioning. Is it about the for statement where I'm wrong? or the structure of the html isn't right.

I've copied some of the code on cart.html file to make the product page had the option of adding products to the cart and also has a proceed button to the checkout page. The before structure of the site was you click on the image of a product and directed to the addtocart page then to the checkout page.`{% extends 'app/base.html' %}

{% load static %}
{% block title %}Category{% endblock title %}
{% block main-content %}
<div class="container my-5">
    <div class="row">
       
           <div class="col-sm-8">
            <div class="card">
                <div class="card-body">
                 {% for prod in product %}
                  <div class="row">
                    <div class="col-sm-3 text-center align-self-center"><a href="{% url 'product-detail' prod.id %}" class="btn"><img src="{{prod.product_image.url}}" alt="" srcset="" class="img-fluid img-thumbnail shadow-sm" height="150" width="150"></a></div>
                    <div class="col-sm-9">
                        <div>
                      <h5>{{prod.title}}</h5>
                      <p class="mb-2 text-muted small">{{prod.description}}</p>
                      <div class="my-3">
                       <label for="quantity">Quantity:</label>
                       <a class="minus-cart btn" pid={{product.id}}><i class="fas fa-minus-square fa-lg"></i></a>
                         <span id="quantity">{{quantity}}</span>
                       <a class="plus-cart btn" pid={{product.id}}><i class="fas fa-plus-square fa-lg"></i></a>
                      </div>
                       <div class="d-flex justify-content-between">
                        <a href="#" class="remove-cart btn btn-sm btn-secondary mr-3" pid={{prod.id}}>Remove item </a>
                        <p class="mb-0"><span><strong>₱ {{prod.discounted_price}}</strong></span></p>
                       </div>
                    </div>
                    </div>
                   </div>
                  <hr class="text-muted">
                 {% endfor %}
                </div>
            </div>
        </div>
        
                 <div class="col-sm-4">
                    <div class="card">
                     <div class="card-body">
                       <h3>The Total Amount </h3>
                       <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0" >Amount<span id="amount">₱ {{amount}}</span></li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">Shipping<span>₱ 144</span></li>
                        <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
                         <div>
                            <strong>Total</strong> 
                          </div>
                          <span id="totalamount"><strong>₱ {{totalamount}}</strong></span>
                        </li>
                       </ul>
                       <div class="d-grid"><a href="{% url 'checkout' %}" class="btn btn-primary">Place Order</a></div>
                     </div>
                    </div>
                   
           </div>       
    </div>
</div>

{% endblock main-content%}

`
Back to Top