I am developing the cart page for a demo by HTML, CSS and Javascript. In the cart, all items in the cart will be separated by store, the item which have the same store will be grouped together.
User can edit the quantity of the item and remove the whole item from cart, if the removed item is the last item of store, the ui of store item group will be removed too. 

I found the bug that the store item group will removed when the user try to remove the item of store but not this is not the last item.
Please review the following related code and fix it:

Javascript:
function removeItem(removeProduct) {

        /* Remove row from DOM and recalc cart total */
        
        //if($("#cart_item_table_pc:visible").length > 0){

            var productRow = $(removeProduct);
            const storeGroup = productRow.parent().closest('.store-group');
            productRow.slideUp(fadeTime, function () {
                productRow.remove();
                recalculateCart();
                usercartTotal();
            });
            
            if (storeGroup.find('.cart-items').children('.cart-item').length === 1) {
                storeGroup.slideUp(fadeTime, function () {
                    storeGroup.remove();
                    recalculateCart();
                    usercartTotal();
                })
            }
           
            
        //}

        
        
        if($("#cart_item_table:visible").length > 0){
            var productRow_class = $(removeProduct).attr("class");
            console.log(productRow_class);
            
            $("." + productRow_class).each(function() {
                $(this).slideUp(fadeTime, function () {
                    $(this).remove();
                    recalculateCart();
                    usercartTotal();
                });
            });
        }
        
        
    }

function recalculateCart() {

        var subtotal = 0;



        /* Sum up row totals */

        $('.product').each(function () {

            subtotal += parseFloat($(this).children('.product-line-price').text());

        });



        /* Calculate totals */

        var tax = subtotal * taxRate;

        var shipping = (subtotal > 0 ? shippingRate : 0);

        var total = subtotal + tax + shipping;



        /* Update totals display */

        $('.totals-value').fadeOut(fadeTime, function () {

            $('#cart-subtotal').html(subtotal.toFixed(2));

            $('#cart-tax').html(tax.toFixed(2));

            $('#cart-shipping').html(shipping.toFixed(2));

            $('#cart-total').html(total.toFixed(2));

            if (total == 0) {

                $('.checkout').fadeOut(fadeTime);

            } else {

                $('.checkout').fadeIn(fadeTime);

            }

            $('.totals-value').fadeIn(fadeTime);

        });

    }

function usercartTotal() {

    var cartTotal = 0;

    let HKFormatDollar = new Intl.NumberFormat('zh-Hant-HK', {
        style: 'currency',
        currency: 'HKD',
    });


    $('#cart-container .store-group').each(function() {
        var storeName = $(this).data('store');
        var totalSum = 0;
    
        $(this).find('.product-line-price').each(function() {
            var val = parseFloat($(this).data('value').toString().replace("HK$", ""))|| 0;
            totalSum += val;
            cartTotal += val;
        });
        
        console.log('Store: ' + storeName + ' 總和為: ' + totalSum);
    });
    
    $("#product_total").text(HKFormatDollar.format(cartTotal));
    $("#final_total").text(HKFormatDollar.format(parseFloat(cartTotal) + parseFloat($("#shipping-fee").data('value'))));
    
    /*
    if($("#cart_table:visible").length > 0){
        $("#cart_table > tbody > tr > .total-price  > .product-line-price").each(function (i) {
    
            cartTotal = parseFloat(cartTotal) + parseFloat($(this).text().replace(/[^\d\.]/g, ''));
    
        });
        $("#final_total").text(cartTotal.toFixed(2));
    }
    */

    

}

Code of Page:
<?php
    // 整理資料結構，成為像原本cartData結構（分店分類）
    // $cart結構可能是扁平，先做分店群組，並帶必需欄位
    
    // 用店名分組
    $grouped = [];
    foreach($cart as $row) {
      if(empty($row['qty']) || $row['qty'] == 0) continue; //跳過無數量商品
      $store = $row['store_name'] ?? 'Unknown Store';
      if(!isset($grouped[$store])) $grouped[$store] = [];
      $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_num'] > 0 ? $row['special_price'] : $row['price'];
      $qty = (int)$row['qty'];
      $grouped[$store][] = [
        'id' => $row['id'],
        'product_variant_id' => $row['product_variant_id'],
        'image' => $row['image'],
        'name' => $row['name'],
        'price' => $price,
        'price_text' => $price_text,
        'qty' => $qty,
        'slug' => $row['slug'],
        'minimum_order_quantity' => $row['minimum_order_quantity'],
        'quantity_step_size' => $row['quantity_step_size'],
        'total_allowed_quantity' => $row['total_allowed_quantity'],
        'total' => $row['total']
      ];
    }

    $finalData = [];
    foreach($grouped as $storeName => $items) {
      $finalData[] = [
        'store' => $storeName,
        'items' => $items
      ];
    }
  ?>
<style>
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,
.item-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: 36px;
    height: 36px;
    font-size: 20px;
    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 */
.item-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;
    }

    .item-total-price {
    text-align: right;
    flex: 0 0 auto;
    min-width: 70px;
    font-weight: 700;
    color: #000;
    }
}
</style>

<!-- ========================= Breadcrumb Start =============================== -->
<div class="breadcrumb mb-0 py-26 bg-main-two-50">
    <div class="container container-lg">
        <div class="breadcrumb-wrapper flex-between flex-wrap gap-16">
            <h6 class="mb-0">購物車</h6>
            <ul class="flex-align gap-8 flex-wrap">
                <li class="text-sm">
                    <a href="https://yymart.com.hk" class="text-gray-900 flex-align gap-8 hover-text-main-600">
                        <i class="ph ph-house"></i>
                        主頁
                    </a>
                </li>
                <li class="flex-align">
                    <i class="ph ph-caret-right"></i>
                </li>
                <li class="text-sm text-main-600"> 購物車 </li>
            </ul>
        </div>
    </div>
</div>
<!-- ========================= Breadcrumb End =============================== -->

    <!-- ================================ Cart Section Start ================================ -->
 <section class="cart py-80">
    <div class="container container-lg">
        <?php if (isset($cart[0]['total_items']) && !empty($cart[0]['total_items']) && $cart[0]['total_items'] != "") { ?>
            <div id="cart-container" class="col-xl-9 col-lg-8">
                <?php foreach($finalData as $storeData) {?>
                    <div class="store-group" data-store="<?=$storeData['store']?>">
                        <div class="store-name"><?=$storeData['store']?></div>
                        <div class="cart-items">
                            <?php foreach($storeData['items'] as $row) { ?>
                                <div class="cart-item" data-id="<?=$row['id']?>" data-store="<?=$storeData['store']?>" data-price="<?=$row['price']?>">
                                    <div class="product-removal remove-btn">
                                        <i class="ph ph-trash" name="remove_inventory" id="remove_inventory" data-id="<?=$row['product_variant_id']?>" title="Remove From Cart" style="font-size:28px;"></i>
                                    </div>
                                    <img src="<?=$row['image']?>" alt="<?=$row['name']?>" />
                                    <div class="item-details">
                                        <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>
                                        <p class="unit-price"><?="單價: ".$row['price_text']?></p>
                                        <div class="quantity-and-total">
                                            <div class="quantity-control">
                                                <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'>  沒有庫存 </span></div>
                                                        <?php } else { ?>
                                                        <div class="num-in" style="margin-top:0px;display:flex;">
                                                            <button type="button" class="minus dis quantity__minus 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="<?= $row['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 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>
                                            </div>
                                            <div class="item-total-price"><span class="product-line-price text-lg h6 mb-0 fw-semibold" data-value="<?=$row['total']?>"><?= $row['total'] ?></span></div>
                                        </div>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                <?php } ?>
            </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>
        <?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 } ?>
    </div>
 </section>
<!-- ================================ Cart Section End ================================ -->