Making cart to increase and decrease correctly

Question

Hi Team

I have cart and its not updating correctly. The cart suppose to start from 0 if a user did not + and when a user click + or - it must update accordingly including the value of the price should change to. Currently my logic is not doing that at the moment and using javascript to do this and need some help.

// javascript

$(document).ready(function() {
  // Add to cart button click event
  $('.btn-plus').on('click', function(e) {
    e.preventDefault();
    var quantityInput = $(this).closest('.input-group').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('.input-group').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', ''));

      // Update cart value and total
      cartValue += quantity;
      cartTotal += quantity * price;
    });

    // 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

  <a class="btn border">
                    <i class="fas fa-shopping-cart text-primary"></i>
                    <span class="badge">0</span>
                </a>



<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" >
                                        <i class="fa fa-minus"></i>
                                        </button>
                                    </div>