Как правильно создать корзину с помощью JavaScript и PHP?

Question

У меня есть php-код, который генерирует страницу корзины в каждой строке моего товара:

1. цена товара
2. количество
3. общая стоимостьitem
4. общая стоимость всего заказа

первым трем я назначил класс и идентификатор в них.

Например:

1. для цены товара идентификатор будет "pr-" + штрих-код товара (например, pr-1234)
2. дляколичество будет "inp-" + штрих-код элемента (например, inp-1234)
3. для общей стоимости элемента будет "tl-"+ штрих-код элемента (например, tl-1234)

Вот мой PHP-код, чтобы лучше понять, что я пытаюсь передать:

<?php
$cart = '';

$id = $_GET['id'];

$cartsql = $conn->prepare("SELECT Barcode, Quantity FROM tblCart WHERE ContactID = :id", $cursor);
$cartsql->bindValue(':id', $id);
$cartsql->execute();

$cartcount = $cartsql->rowCount();

if($cartcount > 0){
    $cart .= '<section class="section-md bg-default">
                    <div class="container">
                        <div class="table-responsive">
                            <table class="table-cart">
                                <thead>
                                    <tr>
                                        <th colspan="2">Product</th>
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>';
    while($cartrow = $cartsql->fetch()){
        $productsql = $conn->prepare("SELECT StockDesc, RetCash FROM tblStocks WHERE Barcode = :id", $cursor);
        $productsql->bindValue(':id', $cartrow['Barcode']);
        $productsql->execute();
        $productrow = $productsql->fetch();

        $productimagesql = $conn->prepare("SELECT TOP 1 SliderImage FROM tblSlider WHERE SliderID = :id", $cursor);
        $productimagesql->bindValue(':id', $cartrow['Barcode']);
        $productimagesql->execute();
        $productimagerow = $productimagesql->fetch();

        $total_row = ($cartrow['Quantity'] * $productrow['RetCash']);

        $cart .= '<tr>
                    <td class="table-cart-remove-item">
                        <span class="btn-remove icon icon-sm linear-icon-cross2 icon-gray-4" id="del-'.$cartrow['Barcode'].'"></span>
                    </td>
                    <td style="min-width: 330px">
                        <div class="unit flex-row unit-spacing-md align-items-center">
                            <div class="unit__left">
                                <img src="'.$productimagerow['SliderImage'].'" alt="" width="141" height="188"/>
                            </div>
                            <div class="unit__body">
                                <h6>
                                    <a class="thumbnail-classic-title" href="philippinebrainproducts-detail.php?id='.$cartrow['Barcode'].'">'.$productrow['StockDesc'].'</a>
                                </h6>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div id="pr-'.$cartrow['Barcode'].'" class="product-price"><span>'.number_format($productrow['RetCash'],2).'</span></div>
                    </td>
                    <td>
                        <input class="inp-quantity form-input" type="number" id="inp-'.$cartrow['Barcode'].'" data-zeros="true" value="'.$cartrow['Quantity'].'" min="1">
                    </td>
                    <td>
                        <div id="tl-'.$cartrow['Barcode'].'" class="product-price"><span>'.number_format($total_row,2).'</span></div>
                    </td>';
    }


    $cart .= '                 </tbody>
                             </table>
                        </div>
                    <div class="row row-50 text-center">
                        <div class="col-sm-12">
                            <div class="text-md-right">
                                <dl id="subtotal" class="list-terms-minimal">
                                    <dt>Subtotal</dt>
                                    <dd></dd>
                                </dl>
                                <dl id="total-price" class="heading-5 list-terms-minimal">
                                    <dt>Total</dt>
                                    <dd>//total cost will be displayed here</dd>
                                </dl>
                                <a class="button button-primary" href="checkout.php"> Proceed to Checkout</a>
                            </div>
                        </div>
                    </div>
                </div>
          </section>';
}

echo $cart;
?>

У меня такой вопрос: как я могу изменить общую стоимость товара и общую стоимость заказа при изменении количества?Я использую номер типа ввода для количества.

Что я сделал до сих пор, так это то, что я получаю класс номера типа ввода для получения значения.Как правильно получить количество и изменить стоимость товара и заказа в зависимости от количества?

$(document).ready(function() { 
    $(document).on("change",".inp-quantity",function() {
        var quantity = $(this).val();
        var id_name = $(this).attr('id');
        var split = id_name.split("-");
        var id = split[1];

        //HERE IS WHERE I SAVE THE QUANTITY OF THE ORDER
        $.ajax({
            url: "change-single-item-total.php",
            method: "POST",
            data: {quantity: quantity,id: id},
            success: function(data){

            },
            error: function(data){
                console.log(data);
            }
        });
    });
});