The cart is updating incorrect values

See more:

jQuery

HTML5

Hi Team

I have a cart each time when a user add an item it first default to 5 instead of 0. Yet when it increase its doing the opposite like 5, 4, 3 ,3. and the quantity remain the same and price e.g 150 not changing. How can i fix this on my jquery logic updateCart function?

What I have tried:

$(document).ready(function() {
  // Add to cart button click event
  $('.btn-plus').on('click', function(e) {
    e.preventDefault();
    var quantityInput = $(this).closest('.quantity').find('input');
    var quantityValue = parseInt(quantityInput.val());

    // Increase quantity value and update input
    quantityInput.val(quantityValue + 1);

    // Update cart value and total
    updateCart();
  });

  // Remove from cart button click event
  $('.btn-minus').on('click', function(e) {
    e.preventDefault();
    var quantityInput = $(this).closest('.quantity').find('input');
    var quantityValue = parseInt(quantityInput.val());

    // Decrease quantity value and update input
    if (quantityValue > 0) {
      quantityInput.val(quantityValue - 1);

      // Update cart value and total
      updateCart();
    }
  });

  // Function to update cart value and total
  function updateCart() {
  var cartValue = 0;
  var cartTotal = 0;

  // Loop through each product row
  $('tbody tr').each(function() {
    var quantityInput = $(this).find('input');
    var quantity = parseInt(quantityInput.val());
    var price = parseFloat($(this).find('.align-middle:nth-child(2)').text().replace('R', ''));

    // Set cart value to the sum of all quantity values
    cartValue += quantity;

    // Calculate the total price for this row and add it to the cart total
    var rowTotal = quantity * price;
    cartTotal += rowTotal;

    // Update the total for this row
    $(this).find('.align-middle:nth-child(4)').text('R' + rowTotal.toFixed(2));
  });

  // Update cart value and total in the HTML
  $('.badge').text(cartValue);
  $('.cart-total').text('R' + cartTotal.toFixed(2));
}

  // Initialize the cart value and total on page load
  updateCart();
});

// html code

<pre><div class="container-fluid pt-5">
        <div class="row px-xl-5">
            <div class="col-lg-8 table-responsive mb-5">
                <table class="table table-bordered text-center mb-0">
                    <thead class="bg-secondary text-dark">
                        <tr>
                            <th>Products</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Total</th>
                            <th>Remove</th>
                        </tr>
                    </thead>
                    <tbody class="align-middle">
                        <tr>
                            <td class="align-middle"><img src="img/product-1.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
                            <td class="align-middle">R150</td>
                            <td class="align-middle">
                                <div class="input-group quantity mx-auto" style="width: 100px;">
                                    <div class="input-group-btn">
                                        <button class="btn btn-sm btn-primary btn-minus" >
                                        
                                        </button>
                                    </div>
                                    <input type="text" class="form-control form-control-sm bg-secondary text-center" value="1">
                                    <div class="input-group-btn">
                                        <button class="btn btn-sm btn-primary btn-plus">
                                            ^__i class="fa fa-plus">
                                        </button>
                                    </div>
                                </div>