Не удалаются елементы с модального окна

Есть модальное окно. Представляет собой корзину в которой храняться продукты для покупки. Когда количество одного и того же продукта меняется, то както странно происходит - появлются дубликаты одного и тогоже modal-fixed-overlay__window-item, а надо чтобы при изменении количества продукта, если такой елемент в корзине уже есть, то простто менять количество, а если нет - добавить новый елемент. (Пока что полностью не готов сам modal-fixed-overlay__window-item, возникла проблема с этим отображением). Помогите пожалуйста, буду благодарен. Если нужны уточнения - уточню.

//modal-fixed-overlay__window-empty-list--active

//import { productAmount } from "../buy-page script/buy-page-script.js";

const modalWindow = document.querySelector('.modal-fixed-overlay');
const modalWindowInner = document.querySelector('.modal-fixed-overlay__window');

const openShopingListButton = document.querySelector('.header__menu-inner-item-link-shoping-list');
const closeShopingListButton = document.querySelector('.modal-fixed-overlay__window-head-exit-button');

const modalHeadText = document.querySelector('.modal-fixed-overlay__window-head-text');
const modalEmptyListTitle = document.querySelector('.modal-fixed-overlay__window-empty-list');

const testButton = document.querySelector('.add');

function removeAllItemsFromBasketWindow() {
    for(let item of modalWindowInner.children) {
        if (item.classList.contains('modal-fixed-overlay__window-item')) {
            item.remove();
        }
    }
}

function renderProductDataItems(data) {
    let pricePerOneProduct = 2500;
    
    console.log(data);

    data.map((item) => {
        modalWindowInner.insertAdjacentHTML(
            'beforeend',

            `
            <div class="modal-fixed-overlay__window-item">
                <div class="modal-fixed-overlay__window-item-image-inner"><img src="./img/buy-page-img/watches/watch (1).png" alt="product icon" class="modal-fixed-overlay__window-item-image-inner-image"></div>

                <div class="modal-fixed-overlay__window-item-product-info">
                    <div class="modal-fixed-overlay__window-item-product-info-name-delete-inner">
                        <a class="modal-fixed-overlay__window-item-product-info-name-delete-inner-name">0.4 TrackMate XE</a>
                        <button class="modal-fixed-overlay__window-item-product-info-name-delete-inner-delete-button"><img src="./img/global-img/modal-img/delete-product-from-list.png" alt="delete product" class="modal-fixed-overlay__window-item-product-info-name-delete-inner-delete-button-img"></button>
                    </div>

                    <p class="modal-fixed-overlay__window-item-product-info-price">2 500,00$</p>
                    <p class="modal-fixed-overlay__window-item-product-info-color">Колір: ${item.color}</p>
                    <div class="modal-fixed-overlay__window-item-product-info-add-sum">

                        <div class="modal-fixed-overlay__window-item-product-info-add-sum-add-product-amount">
                            <button class="modal-fixed-overlay__window-item-product-info-add-sum-add-product-amount-add-button add-amount">+</button>
                            <input type="number" class="modal-fixed-overlay__window-item-product-info-add-sum-add-product-amount-input" value="0">
                            <button class="modal-fixed-overlay__window-item-product-info-add-sum-add-product-amount-add-button minus-amount">-</button>
                        </div>
                        <p class="modal-fixed-overlay__window-item-product-info-add-sum-total-price">${item.amount * pricePerOneProduct},00$</p>

                    </div>
                </div>
                            
            </div>
            `

        );
    })

}   

function loadProductDataFromLocalStorage() {
    const productData = JSON.parse(localStorage.getItem('basketProductsData'));

    if(productData) {
        renderProductDataItems(productData);
    } else {
        modalEmptyListTitle.classList.add('modal-fixed-overlay__window-empty-list--active');
    };
}

function closeShopingList() {
    for(let item of modalWindowInner.children) {
        if (item.classList.contains('modal-fixed-overlay__window-item')) {
            item.remove();
        }
    }

    modalWindow.classList.remove('modal-fixed-overlay--modal-active');

    openShopingListButton.addEventListener('click', openShopingList);
    closeShopingListButton.removeEventListener('click', closeShopingList);
}

function openShopingList() {
    loadProductDataFromLocalStorage();

    modalHeadText.textContent = `Кошик(0)`;

    modalWindow.classList.add('modal-fixed-overlay--modal-active');

    openShopingListButton.removeEventListener('click', openShopingList);
    closeShopingListButton.addEventListener('click', closeShopingList);
}

// testButton.addEventListener('click', function () {
//     modalWindowInner.insertAdjacentHTML('beforeend', shoppingItemHTML);
// });

export { openShopingListButton, openShopingList };

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