jQuery для увеличения количества и общей стоимости нескольких товаров

Question

Я пытаюсь получить свой код jQuery, чтобы увеличить / уменьшить количество и рассчитать общую стоимость каждого предмета. Проблема заключается в том, что когда я нажимаю кнопку увеличения / уменьшения количества для одного товара, все поля количества для всех товаров в корзине обновляются до одного и того же значения. Общая стоимость указана только за первый товар.

изображение корзины

$(document).ready(function() {
    $(".item").on("input", ".quantity", function() {
        var price = +$(".price").data("price");
        var quantity = +$(this).val();
        $("#total").text("$" + price * quantity);
    })

    var $buttonPlus = $('.btn-plus');
    var $buttonMin = $('.btn-minus');
    var $quantity = $('.quantity');

    /*For plus and minus buttons*/
    $buttonPlus.click(function() {
        $quantity.val(Math.min(parseInt($quantity.val()) + 1, 999)).trigger('input');
    });

    $buttonMin.click(function() {
        $quantity.val(Math.max(parseInt($quantity.val()) - 1, 1)).trigger('input');
    });
});

<?php
function shoppingcartelement($productimg,$productname,$price,$productid){
$element="
<form action=\"cart.php?action=remove&id=$productid\" method=\"post\" class=\"cart-items\">
    <div class=\"item border rounded\">
        <div class=\"row\">
            <div class=\"col-md-3\">
                <img src=\"$productimg\" alt=\"img1\" class=\"img-fluid\">
            </div>
            <div class=\"col-md-2 bg-white\">
                <h5 class=\"pt-2\">$productname</h5>
                <p id=\"$productid\"></p>
                <h5 class=\"price pt-2\" data-price=\"$price\">$ $price</h5>
            </div>
            <div class=\"col-md-3 py-5 bg-white\">
                <div class=\"input-group\">
                    <span class=\"input-group-btn\">
                        <button type=\"button\" class=\"btn btn-info btn-minus\" data-type=\"minus\" data-field=\"quant[1]\">
                            <img style=\"height:15px\" width=\"15px\" src=\"./icon/minus.png\" alt=\"\">
                        </button>
                    </span>
                    <input type=\"text\" class=\"quantity form-control mx-1\" value=\"1\">
                    <span class=\"input-group-btn\">
                        <button type=\"button\" class=\"btn btn-info btn-plus\" data-type=\"plus\" data-field=\"quant[1]\">
                            <img style=\"height:15px\" width=\"15px\" src=\"./icon/plus.png\" alt=\"\">
                        </button>
                    </span>
                </div>
            </div>
            <div class=\"col-md-3 bg-white\">
                <h5 class=\"total my-5\">Total: <span id=\"total\">$ $price</span></h5>
            </div>
            <div class=\"col-md-1 bg-white\">
                <button type=\"submit\" class=\"bg-white mt-5\" style=\"border: none; outline:none;\" name=\"remove\">
                    <img style=\"height:30px\" width=\"30px\" src=\"./icon/x.png\" alt=\"\">
                </button>
            </div>
        </div>
    </div>
</form>
";
echo $element;
}

Answer 1

Ваш обработчик кликов смотрит на сумму $, которая возвращает все поля ввода количества, а не только поле, соответствующее нажатой кнопке. Попробуйте что-то вроде этого:

$buttonPlus.click(function() {
  $(this).closest('.input-group').find('.quantity').val(Math.min(parseInt($quantity.val()) + 1, 999)).trigger('input');
});

В этом примере вы ищете упаковочный контейнер группы ввода и получаете поле ввода из этого указанного c контейнера.