[
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Shopping Cart with Stores</title>
    <style>
      /* Reset some default */
      * {
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background: #f5f5f5;
      }

      .container {
        max-width: 960px;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      h2 {
        margin-top: 0;
        margin-bottom: 20px;
        font-weight: 600;
        color: #333;
      }

      /* Store group styles */
      .store-group {
        margin-bottom: 5px;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 15px;
        background: #fafafa;
      }

      .store-name {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 5px;
        color: #222;
        border-bottom: 2px solid #ccc;
        padding-bottom: 5px;
      }

      /* Cart Items List */
      .cart-items {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .cart-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid #ddd;
        padding-bottom: 5px;
        position: relative;
      }

      /* Remove button */
      .remove-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        border: none;
        background: transparent;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        color: #a00;
        font-weight: 700;
        user-select: none;
        padding: 0;
        transition: color 0.2s ease;
      }

      .remove-btn:hover {
        color: #e00;
      }

      .cart-item img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 4px;
        flex-shrink: 0;
      }

      .item-details {
        flex: 1 1 200px;
        padding: 0 15px;
      }

      .item-title {
        font-weight: 600;
        margin: 0 0 8px;
      }

      .store-label {
        font-size: 0.85rem;
        color: #888;
        margin-bottom: 4px;
      }

      .unit-price,
      .total-price {
        font-size: 0.9rem;
        color: #555;
      }

      /* Quantity control */
      .quantity-control {
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        overflow: hidden;
        width: 120px;
        margin-top: 8px;
      }

      .quantity-control button {
        background: #eee;
        border: none;
        width: 30px;
        height: 30px;
        font-size: 18px;
        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s ease;
      }

      .quantity-control button:hover {
        background: #ddd;
      }

      .quantity-control input {
        border: none;
        width: 60px;
        text-align: center;
        font-size: 1rem;
        outline: none;
      }

      /* Total price */
      .total-price {
        font-weight: 700;
        color: #000;
        text-align: right;
        min-width: 80px;
        position: absolute;
        bottom: 20px;
        right: 10px;
      }

      /* Cart Summary */
      .cart-summary {
        border-top: 2px solid #333;
        padding-top: 20px;
        max-width: 350px;
        margin-left: auto;
      }

      .summary-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 1rem;
        color: #333;
      }

      .summary-row.total {
        font-weight: 700;
        font-size: 1.2rem;
        border-top: 2px solid #333;
        padding-top: 12px;
        margin-top: 12px;
      }

      /* Checkout button */
      .checkout-button {
        display: block;
        width: 100%;
        background-color: #28a745;
        color: white;
        font-weight: 700;
        font-size: 1.1rem;
        padding: 15px 0;
        text-align: center;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        margin-top: 25px;
        transition: background-color 0.3s ease;
        text-decoration: none;
        /* if you use 
			<a> */
      }

      .checkout-button:hover {
        background-color: #218838;
      }

      /* Responsive */
      @media (max-width: 600px) {
        .cart-item {
          flex-direction: column;
          align-items: flex-start;
          padding-bottom: 10px;
          /* reduce space under each item */
          margin-bottom: 10px;
          /* ensure items don't have big gaps */
        }

        .item-details {
          padding: 0 5px 10px 5px;
          /* reduce horizontal padding */
          width: 100%;
          flex: 1 1;
        }

        /* Group quantity and total price row */
        .quantity-and-total {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }

        .quantity-control {
          margin: 0;
          /* remove top margin */
          width: auto;
          flex-shrink: 0;
        }

        .total-price {
          text-align: right;
          flex: 0 0 auto;
          min-width: 70px;
          font-weight: 700;
          color: #000;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Your Shopping Cart</h2>
      <div id="cart-container">
        <!-- Store groups and items will be injected here -->
      </div>
      <div class="cart-summary">
        <div class="summary-row">
          <span>Cart Total:</span>
          <span id="cart-total">$0.00</span>
        </div>
        <div class="summary-row">
          <span>Shipping:</span>
          <span id="shipping-cost">$5.00</span>
        </div>
        <div class="summary-row total">
          <span>Total Amount:</span>
          <span id="total-amount">$0.00</span>
        </div>
        <button class="checkout-button">Checkout</button>
      </div>
    </div>
    <script>
      // Sample cart data including store name
      const cartData = [{
        store: "Clothing Store",
        items: [{
          id: 1,
          img: "https://via.placeholder.com/80",
          title: "Awesome T-Shirt",
          price: 29.99,
          quantity: 1,
        }, {
          id: 2,
          img: "https://via.placeholder.com/80",
          title: "Stylish Hat",
          price: 15.5,
          quantity: 2,
        }, ],
      }, {
        store: "Gadget Shop",
        items: [{
          id: 3,
          img: "https://via.placeholder.com/80",
          title: "Wireless Mouse",
          price: 19.99,
          quantity: 1,
        }, {
          id: 4,
          img: "https://via.placeholder.com/80",
          title: "USB C Charger",
          price: 25.0,
          quantity: 1,
        }, ],
      }, ];
      const cartContainer = document.getElementById('cart-container');
      // Create store group container
      function createStoreGroup(storeName) {
        const storeGroup = document.createElement('div');
        storeGroup.className = 'store-group';
        storeGroup.dataset.store = storeName;
        const storeHeader = document.createElement('div');
        storeHeader.className = 'store-name';
        storeHeader.textContent = storeName;
        const cartItems = document.createElement('div');
        cartItems.className = 'cart-items';
        storeGroup.appendChild(storeHeader);
        storeGroup.appendChild(cartItems);
        return {
          storeGroup,
          cartItems
        };
      }
      // Create an individual cart item element
      function createCartItem(item, storeName) {
        const div = document.createElement('div');
        div.className = 'cart-item';
        div.dataset.price = item.price;
        div.dataset.store = storeName;
        div.dataset.id = item.id;
        div.innerHTML = `
        
				<button class="remove-btn" title="Remove item">&times;</button>
				<img src="${item.img}" alt="${item.title}" />
				<div class="item-details">
					<p class="item-title">${item.title}</p>
					<p class="unit-price">Unit Price: $${item.price.toFixed(2)}
          
						<div class="quantity-and-total">
							<div class="quantity-control">
								<button class="qty-minus">−</button>
								<input type="number" min="1" value="1" class="qty-input" />
								<button class="qty-plus">+</button>
							</div>
							<div class="total-price">$${(item.price * item.quantity).toFixed(2)}</div>
						</div> `;
        return div;
      } // Render cart grouped by stores 
      function renderCart() {
        cartContainer.innerHTML = ''; // clear container 
        cartData.forEach(storeGroup => {
          const {
            storeGroup: storeEl,
            cartItems
          } = createStoreGroup(storeGroup.store);
          storeGroup.items.forEach(item => {
            const cartItem = createCartItem(item, storeGroup.store);
            cartItems.appendChild(cartItem);
          });
          cartContainer.appendChild(storeEl);
        });
        attachEventListeners();
        updateCartSummary();
      } // Attach event listeners for qty controls and remove buttons 
      function attachEventListeners() {
        document.querySelectorAll('.qty-minus').forEach(button => {
          button.onclick = () => {
            const input = button.nextElementSibling;
            let val = parseInt(input.value) || 1;
            if (val > 1) {
              input.value = val - 1;
              updateItemTotal(input.closest('.cart-item'));
            }
          };
        });
        document.querySelectorAll('.qty-plus').forEach(button => {
          button.onclick = () => {
            const input = button.previousElementSibling;
            let val = parseInt(input.value) || 1;
            input.value = val + 1;
            updateItemTotal(input.closest('.cart-item'));
          };
        });
        document.querySelectorAll('.qty-input').forEach(input => {
          input.oninput = () => {
            let val = parseInt(input.value);
            if (isNaN(val) || val < 1) val = 1;
            input.value = val;
            updateItemTotal(input.closest('.cart-item'));
          };
        });
        document.querySelectorAll('.remove-btn').forEach(button => {
          button.onclick = () => {
            const cartItem = button.closest('.cart-item');
            const storeGroup = cartItem.closest('.store-group'); // Remove from cartData 
            removeItemFromData(cartItem.dataset.store, cartItem.dataset.id); // Remove from DOM 
            cartItem.remove(); // If no items left in store, remove store group 
            if (storeGroup.querySelectorAll('.cart-item').length === 0) {
              storeGroup.remove();
            }
            updateCartSummary();
          };
        });
      } // Update item total based on quantity input 
      function updateItemTotal(cartItem) {
        const price = parseFloat(cartItem.dataset.price);
        const qtyInput = cartItem.querySelector('.qty-input');
        let qty = parseInt(qtyInput.value);
        if (isNaN(qty) || qty < 1) qty = 1;
        qtyInput.value = qty;
        const totalPriceEl = cartItem.querySelector('.total-price');
        totalPriceEl.textContent = `$${(price * qty).toFixed(2)}`; // Update data model 
        updateItemQuantity(cartItem.dataset.store, cartItem.dataset.id, qty);
        updateCartSummary();
      } // Update quantity in data model 
      function updateItemQuantity(storeName, itemId, newQty) {
        const store = cartData.find(s => s.store === storeName);
        if (!store) return;
        const item = store.items.find(i => i.id.toString() === itemId);
        if (item) {
          item.quantity = newQty;
        }
      } // Remove item from data model by store and id 
      function removeItemFromData(storeName, itemId) {
        const store = cartData.find(s => s.store === storeName);
        if (!store) return;
        store.items = store.items.filter(i => i.id.toString() !== itemId); // If no items left, remove store 
        if (store.items.length === 0) {
          const idx = cartData.findIndex(s => s.store === storeName);
          if (idx !== -1) cartData.splice(idx, 1);
        }
      } // Update cart summary totals 
      function updateCartSummary() {
        const shippingCost = 5.00; // fixed 
        let cartTotal = 0;
        cartData.forEach(storeGroup => {
          storeGroup.items.forEach(item => {
            cartTotal += item.price * item.quantity;
          });
        });
        document.getElementById('cart-total').textContent = `$${cartTotal.toFixed(2)}`;
        document.getElementById('shipping-cost').textContent = `$${shippingCost.toFixed(2)}`;
        document.getElementById('total-amount').textContent = `$${(cartTotal + shippingCost).toFixed(2)}`;
      } // Initialize cart 
      renderCart();
    </script>
  </body>
</html>
]

The above code is for shopping cart, I want to integrate with the backend data that come from Server by PHP, I have the result from PHP array (i.e. $cart_items) already, and the following code is the original version of my cart that include the PHP result.
<?php if (isset($cart[0]['total_items']) && !empty($cart[0]['total_items']) && $cart[0]['total_items'] != "") { ?>
        <div class="row gy-4">
            <div class="col-xl-9 col-lg-8">
                <div class="cart-table border border-gray-100 rounded-8 px-40 py-48">
                    <div class="scroll-sm scroll-sm-horizontal"> <!--overflow-x-auto-->
                        <table class="table style-three cart_table" id="cart_table" style="min-width: unset;">
                            <thead>
                                <tr>
                                    <th class="h6 mb-0 text-lg fw-bold">刪除</th>
                                    <th class="h6 mb-0 text-lg fw-bold">產品名稱</th>
                                    <th class="h6 mb-0 text-lg fw-bold">單價</th>
                                    <th class="h6 mb-0 text-lg fw-bold">數量</th>
                                    <th class="h6 mb-0 text-lg fw-bold">小計</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($cart as $key => $row) { 
                                    if (isset($row['qty']) && $row['qty'] != 0) {
                                        $price = $row['special_price_num'] != '' && $row['special_price_num'] != null && $row['special_price_num'] > 0 ? $row['special_price_num'] : $row['price_num'];
                                        $price_text = $row['special_price'] != '' && $row['special_price'] != null && $row['special_price'] > 0 ? $row['special_price'] : $row['price'];
                                ?>
                                    <tr>
                                        <td>
                                            <!--
                                            <button type="button" class="remove-tr-btn flex-align gap-12 hover-text-danger-600">
                                                <i class="ph ph-x-circle text-2xl d-flex"></i>
                                                Remove
                                            </button>
                                            -->
                                            <div class="product-removal">
                                                <i class="ph ph-trash" name="remove_inventory" id="remove_inventory" data-id="<?= $row['id']; ?>" title="Remove From Cart" style="font-size:28px;"></i>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="table-product d-flex align-items-center gap-24">
                                                <a href="<?= base_url('products/details/' . $row['slug']) ?>" class="table-product__thumb border border-gray-100 rounded-8 flex-center ">
                                                    <img src="<?= $row['image'] ?>" alt="<?= $row['name']; ?>">
                                                </a>
                                                <div class="table-product__content text-start">
        
                                                    <h6 class="title text-lg fw-semibold mb-8">
                                                        <a href="<?= base_url('products/details/' . $row['slug']) ?>" class="link text-line-2" tabindex="0"><?= output_escaping(str_replace('\r\n', '&#13;&#10;', $row['name'] ?? "")); ?></a>
                                                    </h6>
                                                    
                                                    <div class="flex-align gap-16 mb-16">
                                                        <!--
                                                        <div class="flex-align gap-6">
                                                            <span class="text-md fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                            <span class="text-md fw-semibold text-gray-900">4.8</span>
                                                        </div>
                                                        <span class="text-sm fw-medium text-gray-200">|</span>
                                                        <span class="text-neutral-600 text-sm">128 Reviews</span>
                                                        -->
                                                    </div>
                                                    
                                                    
                                                    <div class="flex-align gap-16">
                                                    <!--
                                                        <a href="cart.html" class="product-card__cart btn bg-gray-50 text-heading text-sm hover-bg-main-600 hover-text-white py-7 px-8 rounded-8 flex-center gap-8 fw-medium">
                                                            Camera
                                                        </a>
                                                        <a href="cart.html" class="product-card__cart btn bg-gray-50 text-heading text-sm hover-bg-main-600 hover-text-white py-7 px-8 rounded-8 flex-center gap-8 fw-medium">
                                                            Videos
                                                        </a>
                                                        -->
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-lg h6 mb-0 fw-semibold"><?= $price_text ?></span>
                                        </td>
                                        <td class="item-quantity">
                                            <div class="d-flex rounded-4 overflow-hidden qty_box num-block skin-2 product-quantity">
                                                <?php $check_current_stock_status = validate_stock(
                                                    [$row['id']],
                                                    [$row['qty']]
                                                ); ?>
                                                <?php if (isset($check_current_stock_status['error'])  && $check_current_stock_status['error'] == TRUE) { ?>
                                                        <div><span class='text text-danger'> Out of Stock </span></div>
                                                    <?php } else { ?>
                                                    <div class="num-in" style="margin-top:0px;display:flex;">
                                                        <button type="button" class="minus dis quantity__minus border border-end border-gray-100 flex-shrink-0 h-48 w-48 text-neutral-600 flex-center hover-bg-main-600 hover-text-white" data-min="<?= (isset($row['minimum_order_quantity']) && !empty($row['minimum_order_quantity'])) ? $row['minimum_order_quantity'] : 1 ?>" data-step="<?= (isset($row['minimum_order_quantity']) && !empty($row['quantity_step_size'])) ? $row['quantity_step_size'] : 1 ?>">
                                                        <i class="ph ph-minus"></i>
                                                        </button>
                                                        <!--<input type="number" class="quantity__input flex-grow-1 border border-gray-100 border-start-0 border-end-0 text-center w-32 px-4" value="1" min="1">-->
                                                        <input type="number" class="in-num itemQty" data-page="cart" data-id="<?= $row['id']; ?>" value="<?= $row['qty'] ?>" data-price="<?= $price ?>" data-step="<?= (isset($row['minimum_order_quantity']) && !empty($row['quantity_step_size'])) ? $row['quantity_step_size'] : 1 ?>" data-min="<?= (isset($row['minimum_order_quantity']) && !empty($row['minimum_order_quantity'])) ? $row['minimum_order_quantity'] : 1 ?>" data-max="<?= (isset($row['total_allowed_quantity']) && !empty($row['total_allowed_quantity'])) ? $row['total_allowed_quantity'] : 0 ?>">
                                                        <button type="button" class="plus quantity__plus border border-end border-gray-100 flex-shrink-0 h-48 w-48 text-neutral-600 flex-center hover-bg-main-600 hover-text-white" data-max="<?= (isset($row['total_allowed_quantity']) && !empty($row['total_allowed_quantity'])) ? $row['total_allowed_quantity'] : '0' ?> " data-step="<?= (isset($row['minimum_order_quantity']) && !empty($row['quantity_step_size'])) ? $row['quantity_step_size'] : 1 ?>">
                                                            <i class="ph ph-plus"></i>
                                                    </button>
                                                    </div>
                                                    <?php } ?>
                                            </div>
                                            
                                            
                                        </td>
                                        <td class="total-price">
                                            <span class="product-line-price text-lg h6 mb-0 fw-semibold" data-value="<?=$row['total']?>"><?= $row['total'] ?></span>
                                        </td>
                                    </tr>
                                <?php } 
                                }
                            ?>
                            </tbody>
                        </table>
                    </div>
                    <!--
                    <div class="flex-between flex-wrap gap-16 mt-16">
                        <div class="flex-align gap-16">
                            <input type="text" class="common-input" placeholder="Coupon Code">
                            <button type="submit" class="btn btn-main py-18 w-100 rounded-8">Apply Coupon</button>
                        </div>
                        <button type="submit" class="text-lg text-gray-500 hover-text-main-600">Update Cart</button>
                    </div>
                    -->
                </div>
            </div>
            <?php $delivery_charge = !empty($cart['sub_total']) ? $cart['delivery_charge_sf_number'] : 0 ?>
            <?php $total = !empty($cart['sub_total']) ? $cart['overall_amount'] : 0 ?>
            <?php $total_num = $cart['overall_amount']?>
            <div class="col-xl-3 col-lg-4">
                <div class="cart-sidebar border border-gray-100 rounded-8 px-24 py-40">
                    <h6 class="text-xl mb-32">購物車總額</h6>
                    <div class="bg-color-three rounded-8 p-24">
                        <div class="mb-32 flex-between gap-8">
                            <span class="text-gray-900 font-heading-two">產品總額</span>
                            <span id="product_total" data-value="<?=$cart['sub_total']?>" class="text-gray-900 fw-semibold"><?= $cart['sub_total'] ?></span>
                        </div>
                        <div class="mb-32 flex-between gap-8">
                            <span class="text-gray-900 font-heading-two">運費</span>
                            <span id="shipping-fee" data-value="<?=$delivery_charge?>" class="text-gray-900 fw-semibold"><?= $cart['delivery_charge_sf'] ?></span>
                        </div>
                        <!--
                        <div class="mb-0 flex-between gap-8">
                            <span class="text-gray-900 font-heading-two">Extimated Taxs</span>
                            <span class="text-gray-900 fw-semibold">USD 10.00</span>
                        </div>
                        -->
                    </div>  
                    <div class="bg-color-three rounded-8 p-24 mt-24">
                        <div class="flex-between gap-8 total-price">
                            <span class="text-gray-900 text-xl fw-semibold">共需支付</span>
                            <span class="text-gray-900 text-xl fw-semibold" style="font-weight: bold !important;" id="final_total" data-value="<?=$total_num?>"><?=$total?></span>
                        </div>
                    </div>  
                    <?php $disabled = empty($cart['sub_total']) ? 'disabled' : '' ?>
                    <a href="<?=base_url('cart/checkout')?>" class="btn btn-main mt-40 py-18 w-100 rounded-8" <?= $disabled ?>>前往付款</a>
                </div>
            </div>
        </div>
        <?php } else { ?>
        <div class="align-items-center d-flex flex-column">
            <img src="<?= base_url('assets/front_end/classic/images/empty-orders.webp') ?>" alt="Empty Cart" class="w-23" style="width:20%" />
            <h1 class="h2 text-center"><?= '你的購物車是空的' ?></h1>
        </div>
        <?php } ?>

Please integrate the code with the new version of cart I mentioned at the beginning.