quantity and remove item in shopping cart

Question

I made the "items" from the shop to be stored in unique array in session and to be passed on the shopping cart , and I want to put quantity for each item and if I want to delete item from the shopping cart to be deleted from the array . I made the html form and quantity buttons for "plus" and "minus" , but I cant figure out how to catch the value in the input when its changed with the buttons and then to multiply it with the cost of each item so later I can get total cost ( In the code it can be seen that I set value="1" for each item , so the base value for each item is 1 ) . I made also with JS to remove the row from deleted item that I want but also didnt figure out how to delete the item from the array

This is my shopping cart :

<div class="container">  
<div class="jumbotron">
    <div class="container text-center">
        <h3>Shopping Cart</h3>     
        <table  class="table table-striped" >
            <tr>
                <th class="items" > Product </th> 
                <th class="items"> Quantity </th>
                <th class="items"> Unit Price </th>
                <th>Total Cost</th>
                <th></th>
            </tr>
            <?php foreach ($selectedItems as $item): ?>
                <tr>
                    <th class="items"><?= $item->name ?></th>
                    <th class="items ">
                        <div>
                            <button type="button" class="sub" title="If u want less quantity">-</button>
                            <input type="text" value="1" id="quantity" class="quantity" name="quantity[]" onchange="quantityChange(this)" > 
                            <button type="button" class="add" title="If u want more quantity" >+</button>
                        </div>
                    </th>
                    <th id="price" class="items"> <?= $item->price ?></th>
                    <th><span class="allcost"> </span></th>
                    <th class="items">
                        <button class="remove_field " title="Click to delete product" >
                            <div class="glyphicon glyphicon-trash" ></div>
                        </button>
                    </th>
                </tr>
            <?php endforeach; ?>
        </table>
        <?= Html::a('Return to Shop', ['/stock/shop'], ['class' => 'btn btn-default']) ?>
        <?= Html::a('Checkout', ['/stock/checkout'], ['class' => 'btn btn-default']) ?>
    </div>
</div>

<script type="text/javascript">
$(document).on('click', 'button.remove_field', function () {
    $(this).closest('tr').remove();
});
$('.add').click(function () {
    var target = $('.quantity', this.parentNode)[0];
    target.value = +target.value + 1;
    target.onchange();
});
$('.sub').click(function () {
    var target = $('.quantity', this.parentNode)[0];
    if (target.value > 1) {
        target.value = +target.value - 1;
    }
    target.onchange();
});
function quantityChange(sender) {
    var quantity = $(sender).val();

    console.log(quantity);
};

My ActionCart :

   public function actionCart() {
    Yii::$app->session->open();

    Yii::$app->session->open();
    $selectedItems = Yii::$app->session['selectedItems'];

    $stockItems = Stock::find()->where(['id' => $selectedItems])->all();


    $data = [
        'selectedItems' => $stockItems,
    ];

    return $this->render('cart', $data);
}

Answer 1

Quantity and Cost solution :

In the HTML code :

<?php foreach ($selectedItems as $item): ?>
                <tr class="product" data-price="<?= $item->price ?>">
                    <th class="items"><?= $item->name ?></th>
                    <th id="price" class="items middle-th "> <!-- the 3rd column -->
                        <div >
                            <button type="button" class="sub" title="If u want less quantity">-</button>
                            <input class="quantityTxt quantity " id="quantity" name="quantity[]" type="text" value="1" onchange="quantityChange(this)" > 
                            <button type="button" class="add" title="If u want more quantity" >+</button>
                        </div>
                    </th>
                    <th>       
                        <span class="productTotal"></span>       
                    </th>
                    <th id="price" class="items  ">
                        <button class="remove_field " data-value="<?= $item->id ?>" title="Click to delete product" >
                            <div class="glyphicon glyphicon-trash" ></div>
                        </button>
                    </th>
                </tr>
            <?php endforeach; ?>

JavaScript Code :

 $('.add').click(function () {
    var target = $('.quantity', this.parentNode)[0];
    target.value = +target.value + 1;
    updateTotal();
});
$('.sub').click(function () {
    var target = $('.quantity', this.parentNode)[0];
    if (target.value > 1) {
        target.value = +target.value - 1;
    }
    updateTotal();
});

function quantityChange(sender) {
    var quantity = $(sender).val();

    console.log(quantity);
}
;

var updateTotal = function () {

    var sum = 0;
    //Add each product price to total
    $(".product").each(function () {
        var price = $(this).data('price');
        var quantity = $('.quantityTxt', this).val();
        //Total for one product
        var subtotal = price * quantity;
        //Round to 2 decimal places.
        subtotal = subtotal.toFixed(2);
        //Display subtotal in HTML element
        $('.productTotal', this).html(subtotal);
    });
    // total
    $('.productTotal').each(function () {
        sum += Number($(this).html());
    });
    $('#sum').html(sum.toFixed(2));
};

//Update total when quantity changes
$(".product").keyup(function () {
    updateTotal();
});

//Update totals when page first loads
updateTotal();

// set this from local
$('span.productTotal').each(function () {
    $(this).before("€");
});

// unit price
$('.product').each(function () {
    var $price = $(this).parents("div").data('price');
    $(this).before($price);
});