I tried adding to the table by multiplying quantity by price, but the sum result doesn’t appear. When one line of code is supposed to add up each row, this shows the total of all the rows in one line.

 <table class="table">                                              
    <thead>                                                 
        <tr>                                                        
        <th>Product Name</th>                                                       
        <th>QTY</th>                                                        
        <th>Box / Pcs</th>                                                      
        <th>Purchase Price </th>                                                        
        <th>Total Cost </th>                                                        
    </tr>                                               
    </thead>                                                
    <tbody>                                                 
        {% for v in product %}                                                      
        <tr>                                                            
            <td>
                <div class="productimgname">                                                                    
                <a href="javascript:void(0);" class="product-img stock-img">
                <img src="{{ base_url }}extends/assets/img/products/no_image.jpg" alt="product">
                </a>
                <a href="javascript:void(0);">{{ v.productName }}</a>
                </div>
            </td>

            <td>
                <div class="product-quantity">
                    <span class="quantity-btn plus">+<i data-feather="plus-circle" class="plus-circle"></i></span>
                    <input type="text" id="quantity" class="quntity-input qty" name="qtyProduct" value="0">
                    <input type="hidden" name="idProduct" value="{{ v.productID }}">
                    <span class="quantity-btn minus"><i data-feather="minus-circle" class="feather-search"></i></span>  
                </div>                                                          
            </td>                                                           
            <td>                                                                
                <span class="pcs_box">0</span> Box / <span  class="pcs_total">0</span> pcs
            </td>                                                           
            <td>MYR. <span id="price" class="amount">{{ v.productPriceSellingMyr }}</span></td>                                                                                                                 
            <td>MYR. <span id="total" class="total_amount">0</span>                     
        <input type="hidden"  class="total_amount_" id="total_idr" name="total_idr" value="0" ></td>                                                        
        </tr>                                                   
        {% endfor %}                                                    
    </tbody>
</table>

This My Jquery

  
$().ready(function(){
    $(".minus").click(function(){
        changeQuantity(-1,this);
        calculate(this);
    });
    $(".plus").click(function(){
        changeQuantity(this);
        calculate(this);
    });
});

function calculate(obj){
    var price = parseFloat($(obj).parent().parent().parent().parent().find('.amount').text()) || 0;
    var quantity = parseInt($(obj).parent().find('.qty').val());
    var total = price * quantity;    
    $(obj).parent().parent().parent().find('.total_amount').text(total).toLocaleString('en');
}


function changeQuantity(num,obj){
    $(obj).parent().find('.qty').val( parseInt($(obj).parent().find('.qty').val())+num);
}

When I run the total it only appears in one row of all the data, it should be the total for each row.