Subtotal will not update after changing the product quantity in my eCommerce cart

Question

I am creating an eCommerce website and I'm struggling with the product quantity in the cart section. The subtotal will not increase when I increase the quantity.

here is where the user can increment and decrement the product quantity.

   <div class="qty d-flex pt-2">
  <div class="d-flex font-rale w-25">
     <form method="post"> 
       <button class="qty-up border bg-light" data-id="<?php echo $item['ProductID'] ?? '0'; ?>"><i class="fas fa-angle-up"></i></button>
       <input type="text" data-id="<?php echo $item['ProductID'] ?? '0'; ?>" class="qty_input border px-2 w-100 bg-light" disabled value="1" placeholder="1">
       <button data-id="<?php echo $item['ProductID'] ?? '0'; ?>" class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
     </form>
  </div>
</div>

here is the JavaScript code

    $(document).ready(function(){

    $('.qty-up').click(function(e) {
        e.preventDefault();
        var inc_value = $(this).closest('.qty d-flex').find('.qty_input').val();
        var value = parseInt(inc_value,10);
        value = isNaN(value) ? 0 : value;
        if(value < 10){
            value++;
            $(this).closest('.qty d-flex').find('.qty_input').val();
        }

    });
$('.qty-down').click(function(e) {
        e.preventDefault();
        var dec_value = $(this).closest('.qty d-flex').find('.qty_input').val();
        var value = parseInt(dec_value,10);
        value = isNaN(value) ? 0 : value;
        if(value > 1){
            value--;
            $(this).closest('.qty d-flex').find('.qty_input').val();
        }
    });

    // product qty section
    let $qty_up = $(".qty .qty-up");
    let $qty_down = $(".qty .qty-down");
    let $input = $(".qty .qty_input");

    // click on qty up button
    $qty_up.click(function(e){
        let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
        let $price = $(`.productPrice[data-id='${$(this).data("id")}']`);
        if($input.val() >= 1 && $input.val() <= 9){
            $input.val(function(i, oldval){
                return ++oldval;
            });
        }
    });
       // click on qty down button
       $qty_down.click(function(e){
        let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
        if($input.val() > 1 && $input.val() <= 10){
            $input.val(function(i, oldval){
                return --oldval;
            });
        }
    });
});

here is where you can see the subtotal

<section id="cart-add" class="section-p1">
 <div id="subtotal">
     <h3>Cart Total</h3>
     <table>
         <tr>
             <td>Cart Subtotal( <?php echo isset($subTotal) ? count($subTotal): 0; ?> item):</td>
             <td>$<?php echo isset($subTotal) ? $Cart->getSum($subTotal) :0 ?></td>
         </tr>
     </table>
     <button class="submit">proceed to checkout</button>
 </div>

here is the getSum function

//calculate sub total
public function getSum($arr){
    if(isset($arr)){
        $sum = 0;
        foreach($arr as $product){
            $sum += floatval($product[0]);
        }
        return sprintf('%.2f', $sum);
    }
}

I have tried but couldn't figure it out.

Answer 1

Change your javascript code to:

...
$('.qty-up').click(function(e) {
    e.preventDefault();
    var inc_value = $(this).closest('.qty d-flex').find('.qty_input').val();
    var value = parseInt(inc_value,10);
    value = isNaN(value) ? 0 : value;
    if(value < 10){
        value++;
        $(this).closest('.qty d-flex').find('.qty_input').val(value); // updated line
    }

});
$('.qty-down').click(function(e) {
    e.preventDefault();
    var dec_value = $(this).closest('.qty d-flex').find('.qty_input').val();
    var value = parseInt(dec_value,10);
    value = isNaN(value) ? 0 : value;
    if(value > 1){
        value--;
        $(this).closest('.qty d-flex').find('.qty_input').val(value); // updated line
    }
});
...

*In your codes there is no place that you update the quantity in the backend side.