Изменение стоимости товара в корзине в зависимости от количества товара

Доброго времени суток.

Ситуация. Есть корзина на сайте, где добавляется товар; есть кнопки, которые увеличивают количество товара; есть стоимость, которая меняется в зависимости от этого количества. На данном этапе работает следующее - в корзину добавляется товар, количество товара изменяется зависимо от нажатия на кнопки "+" и "-" и даже меняется стоимость товара при увеличении и уменьшении счётчика товаров. Но все работает хорошо, пока в корзине один товар. Стоит мне добавить ещё один товар и изменить количество у одного товара, как стоимость этого же товара прописывается во все последующие.

Данные для наполнения корзины берутся из LocalStorage, из массива объектов, в которых записана следующая информация - id, название, количество, стоимость, каталожный номер и ссылка на картинку. Применялся следующий код для прописывания товаров в корзине, количества товаров и стоимости товара при увеличении/уменьшении числа товаров:

function createItems(array) {
        $(`.${classList.cartWrapper}`).empty();
        cartIdsArr.forEach(function (item) {
            let itemObj = item;
            if (itemObj.id !== null) {
                $(`.${classList.cartWrapper}`).append(`
                    <div class="${classList.cartItem}">
                        <div class="cart--item-img">
                            <img src="${itemObj.img}">
                        </div>
                        <div class="cart--item--description">
                            <h5>${itemObj.name}</h5>
                            <div class="cart--item--numbers--circle">
                                <p>Кількість:</p>
                                <input type="text" name="TextBox" class="textbox" id="${itemObj.id}" value="${itemObj.count}">
                                <input type="Button" data-id="${itemObj.id}" class="cart_signs__less" value="-">
                                <input type="Button" data-id="${itemObj.id}" class="cart_signs__more" value="+">
                            </div>
                            <p class="cart--item--price" data-id="${itemObj.id}" data-currency="&nbsp;грн">${itemObj.price}</p>
                        </div>
                        <div class="remove__button">
                            <button class="cart__remove" data-id="${itemObj.id}">×</button>
                        </div>
                    </div>
                `);
            };
            $(`.${classList.buttonCountMore}`).on('click', function () {
                let thisDataId = $(this).attr('data-id');
                let PriceId = $('.cart--item--price').attr('data-id');
                let counter = $(`#${itemObj.id}`).val();
                let cartTotalPrice = itemObj.price;
                if(thisDataId === itemObj.id) {
                    counter++;
                    $(`#${itemObj.id}`).val(counter);
                    cartTotalPrice = (counter * itemObj.price);
                    $(`.${classList.cartItemPrice}`).replaceWith(`<p class="cart--item--price" data-id="${itemObj.id}" data-currency="&nbsp;грн">${cartTotalPrice}</p>`);
                }

            });
            $(`.${classList.buttonCountLess}`).on('click', function () {
                let thisDataId = $(this).attr('data-id');
                let PriceId = $('.cart--item--price').attr('data-id');
                let counter = $(`#${itemObj.id}`).val();
                let cartTotalPrice = itemObj.price;
                if(thisDataId === itemObj.id && counter > 1) {
                    counter--;
                    $(`#${itemObj.id}`).val(counter);
                    cartTotalPrice = (counter * itemObj.price);
                    $(`.${classList.cartItemPrice}`).replaceWith(`<p class="cart--item--price" data-id="${itemObj.id}" data-currency="&nbsp;грн">${cartTotalPrice}</p>`);
                }

            });
        });
    }

где cartIdsArr - это массив объектов из LocalStorage и с помощью forEach отстраиваются товары в корзине, а с помощью функций при нажатии кнопок buttonCountMore и buttonCountLess соответственно меняется количество товаров и прописывается "новая" стоимость товаров.

Полагаю проблема кроется в том, что функции buttonCountMore и buttonCountLess отрабатывают внутри forEach и потому изменённая стоимость одного товара прописывается во все остальные, благодаря методу .replaceWith.

Есть идея добавить ещё один forEach, который будет перебирать объект одного товара среди массива всех товаров в LocalStorage. Но, к сожалению, моих знаний на данном этапе не хватает, так как это мой второй проект, где нужно прописывать корзину, потому прошу отнестись с пониманием.

Буду рад за любую помощь в этом вопросе. Если нужна будет дополнительная информация, только намекните.


Ответы (0 шт):