displaying total and discount from the table?

Question

Hi Team

I have a dummy data from now and have an insert field for total, discount and unit price. How do i display this data to my table on html side? I do have a logic for it on jquery side. Let me share my code.

<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 isset($_SESSION['cart']) ? '<span id="cart-count">' . 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"><span id="total-amount">Total</span></th>

                        </tr>
                      </thead>
                      <tbody id="cart-items">
                        <tr>
                          <td><a ><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
                          <td><a >White Blouse Armani</a></td>
                          <td>
                <div class="input-group">
                <span class="input-group-btn">
                <button class="btn btn-default btn-minus" type="button">-</button>
                </span>
                <input type="number" name="product1" value="0" min="1" class="form-control product-quantity" data-product-id="1">
              <span class="input-group-btn">
              <button class="btn btn-default btn-plus" type="button">+</button>
            </span>
          </div>
                          </td>
                          <td>R</td>
                          <td></td>
                          <td>R</td>
                          <td><a><i class="fa fa-trash-o"></i></a></td>
                        </tr>
                        <tr>
  <td><a><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
  <td><a>White Blouse Armani</a></td>
  <td>
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default btn-minus" type="button">-</button>
      </span>
      <input type="number" name="product1" value="0" min="1" class="form-control product-quantity" data-product-id="1">
      <span class="input-group-btn">
        <button class="btn btn-default btn-plus" type="button">+</button>
      </span>
    </div>
  </td>
  <td>R</td>
  <td>%13</td>
  <td>R</td>
  <td><a><i class="fa fa-trash-o"></i></a></td>
</tr>

// php code
<?php
session_start();
//$_SESSION['cart'];


require_once 'dbconn.php';

// add to cart
if(isset($_POST['id'])) {
  $product_id = $_POST['id'];
  if(isset($_SESSION['cart'][$product_id])) {
    $_SESSION['cart'][$product_id]++;
  } else {
    $_SESSION['cart'][$product_id] = 1;
  }
  echo count($_SESSION['cart']);
  exit;
}

// update cart
if(isset($_POST['update_cart'])) {
  $cart_data = $_POST['cart_data'];
  foreach($cart_data as $product_id => $quantity) {
    $_SESSION['cart'][$product_id] = $quantity;
  }
  $total = $_POST['total'];
  echo json_encode(array('success' => true, 'total' => $total));
  exit;
}

?>

// jquery code

function displayCart() {
    var cart = getCart();
    var cartItems = $('#cart-items');
    cartItems.empty(); // remove any existing rows from the table
    for (var productId in cart) {
      var product = getProductId(productId);
      var price = parseFloat(product.price);
      var quantity = parseInt(cart[productId]);
      var discount = parseFloat(product.discount);

      // Check if all values are numbers before adding to the table
      if (!isNaN(price) && !isNaN(quantity) && !isNaN(discount)) {
        var subtotal = price * quantity * (1 - discount);
        var row = $('<tr>').appendTo(cartItems);
        $('<td>').text(product.name).appendTo(row);
        $('<td>').text('$' + price.toFixed(2)).appendTo(row);
        $('<td>').text(quantity).appendTo(row);
        $('<td>').text(discount.toFixed(2)).appendTo(row);
        $('<td>').text('$' + subtotal.toFixed(2)).appendTo(row);
      }
    }
    calculate_total();
  }

$(document).ready(function() {
  $('.btn-plus').click(function() {
    var productId = $(this).closest('.input-group').find('.product-quantity').data('product-id');
    var quantityInput = $(this).closest('.input-group').find('.product-quantity');
    var currentQuantity = parseInt(quantityInput.val());
    var newQuantity = currentQuantity + 1;
    quantityInput.val(newQuantity);
    addToCart(productId, newQuantity);
  });

  $('.btn-minus').click(function() {
    var productId = $(this).closest('.input-group').find('.product-quantity').data('product-id');
    var quantityInput = $(this).closest('.input-group').find('.product-quantity');
    var currentQuantity = parseInt(quantityInput.val());
    if (currentQuantity > 1) {
      var newQuantity = currentQuantity - 1;
      quantityInput.val(newQuantity);
      addToCart(productId, newQuantity);
    }
  });

  // Initialize the cart count in the navbar
  updateCartCount();
});