Items are not removed from the table when clicked

Question

Hi Team

I have a logic to remove the item from the list, whilestill if a user add and decrease it does that part fine. The issue is when remove its not clickable, there are no bugs no error when inspecting. Yet another is its the updating of cart is not sequencial it does not start from 0 upwards it keeps changing the value and quantity does that as well.

// js code

*/
$(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();
    }
  });

  // Remove button click event
  $('.btn-remove').on('click', function(e) {
    e.preventDefault();

    // Remove the corresponding row from the table
    $(this).closest('tr').remove();

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

            <td class="align-middle"><img src="img/product-5.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>
                                    <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"></i>
                                        </button>
                                    </div>
                                </div>
                            </td>
                            <td class="align-middle">R150</td>
                            <td class="align-middle"><button class="btn btn-sm btn-primary btn-remove"><i class="fa fa-times"></i></button></td>
                        </tr>
                    </tbody>
                </table>