decrement and incrementing cart to basket in php and jquery

Question

Hi Team

I have a button that adds an item but its not increment nor decrementing, can anyone can help with this? I am using jquery and php pdo to do. Below is my logic both front end and back end. How do i also show quantity to the table and total, when this is to be send to checkout page?

 

// html code

<!--Basket for item to be added to cart-->
      <div id="search-not-mobile" class="navbar-collapse collapse"></div><a data-toggle="collapse" #search" class="btn navbar-btn btn-primary d-none d-lg-inline-block"><span class="sr-only">Toggle search</span><i class="fa fa-search"></i></a>
      <div id="basket-overview" class="navbar-collapse collapse d-none d-lg-block">
      <a "basket.html" class="btn btn-primary navbar-btn">
     <i class="fa fa-shopping-cart"></i>
    <span><?php echo count($_SESSION['cart']); ?></span>
    </a>
    </div>

   <!--end bakset to add cart-->
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- breadcrumb-->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a >Home</a></li>
          <li aria-current="page" class="breadcrumb-item active">Shopping cart</li>
        </ol>
      </nav>
    </div>
    <div id="basket" class="col-lg-9">
      <div class="box">
        <form method="post" action="add_to_cart.php">
          <h1>Shopping cart</h1>
          <p class="text-muted">You currently have <span id="cart-count"><?php echo count($_SESSION['cart']); ?></span>
          <p id="cart-message" class="text-success" style="display: none;"></p>
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th colspan="2">Product</th>
                  <th>Quantity</th>
                  <th>Unit price</th>
                  <th>Discount</th>
                  <th colspan="2">Total</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><a><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
                  <td><a>White Blouse Armani</a></td>
                  <td>
                    <button class="update-cart" data-product-id="1" data-type="add">+</button> 
                     <span id="cart-count-item1"><?php echo (isset($_SESSION['cart'][1])) ? $_SESSION['cart'][1] : 0; ?></span>
                    <button class="update-cart" data-product-id="1" data-type="subtract">-</button>

                    
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td><a ><i class="fa fa-trash-o"></i></a></td>
                </tr>
                <tr>
                  <td><a ><img src="img/basketsquare.jpg" alt="Black Blouse Armani"></a></td>
                  <td><a >Black Blouse Armani</a></td>
                  <td>
                  <button class="add-to-cart" data-product-id="1">Add to Cart</button>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td><a ><i class="fa fa-trash-o"></i></a></td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <th colspan="5">Total</th>
                  <th colspan="2"></th>
                </tr>
              </tfoot>
            </table>
          </div>

// jquery code

$(document).on('click', '.update-cart', function() {
  var product_id = $(this).data('product-id');
  var type = $(this).data('type');
  var quantity = parseInt($('#cart-count-item'+product_id).text());

  if (type == 'add') {
    quantity += 1;
  } else if (type == 'subtract') {
    quantity -= 1;
    if (quantity < 0) {
      quantity = 0;
    }
  }

  // Send AJAX request to update cart quantity
  $.ajax({
    url: 'update_cart.php',
    type: 'POST',
    data: {product_id: product_id, quantity: quantity},
    success: function(response) {
      // Update cart count
      $('#cart-count').text(response);
      $('#cart-count-item'+product_id).text(quantity);
    }
  });
});

// php code

<?php
session_start();

if (isset($_POST['product_id']) && isset($_POST['quantity'])) {
  $product_id = $_POST['product_id'];
  $quantity = $_POST['quantity'];

  if ($quantity == 0) {
    // Remove item from cart
    unset($_SESSION['cart'][$product_id]);
  } else {
    // Update cart quantity
    $_SESSION['cart'][$product_id] = $quantity;
  }

  // Return updated cart count
  $cart_count = count($_SESSION['cart']);
  echo $cart_count;
}
?>