Изменение стоимости товара в корзине в зависимости от количества товара
Доброго времени суток.
Ситуация. Есть корзина на сайте, где добавляется товар; есть кнопки, которые увеличивают количество товара; есть стоимость, которая меняется в зависимости от этого количества. На данном этапе работает следующее - в корзину добавляется товар, количество товара изменяется зависимо от нажатия на кнопки "+" и "-" и даже меняется стоимость товара при увеличении и уменьшении счётчика товаров. Но все работает хорошо, пока в корзине один товар. Стоит мне добавить ещё один товар и изменить количество у одного товара, как стоимость этого же товара прописывается во все последующие.
Данные для наполнения корзины берутся из 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=" грн">${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=" грн">${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=" грн">${cartTotalPrice}</p>`);
}
});
});
}
где cartIdsArr - это массив объектов из LocalStorage и с помощью forEach отстраиваются товары в корзине, а с помощью функций при нажатии кнопок buttonCountMore и buttonCountLess соответственно меняется количество товаров и прописывается "новая" стоимость товаров.
Полагаю проблема кроется в том, что функции buttonCountMore и buttonCountLess отрабатывают внутри forEach и потому изменённая стоимость одного товара прописывается во все остальные, благодаря методу .replaceWith.
Есть идея добавить ещё один forEach, который будет перебирать объект одного товара среди массива всех товаров в LocalStorage. Но, к сожалению, моих знаний на данном этапе не хватает, так как это мой второй проект, где нужно прописывать корзину, потому прошу отнестись с пониманием.
Буду рад за любую помощь в этом вопросе. Если нужна будет дополнительная информация, только намекните.