Показать выбранные параметры умного фильтра над товарами, с возможностью отмены выбора

data-url="<?= $ar['URL_ID']; ?>

    function removeCheckboxAndClickSubmit(button) {
        button.remove();
        const url = new URL(window.location).toString();
        const itemUrl = button.getAttribute('data-url');
        let newUrl;

        if (url.includes(`-${itemUrl}-or`)) {
            newUrl = url.replace(`-${itemUrl}-or`, '');
        } else {
            if (url.includes(`-or-${itemUrl}`)) {
                newUrl = url.replace(`-or-${itemUrl}`, '');
            } 
            else {
                newUrl = url.replace(`-${itemUrl}`, '');
            }
        }

        window.location.replace(newUrl);
    }

    checkboxes.forEach((checkbox) => {        checkbox.addEventListener('change', function () {
            const buttonId = this.id;
            const existingButton = checkedItemsContainer.querySelector(`#${buttonId}`);

            if (this.checked) {
                if (!existingButton) {
                    const button = document.createElement('button');
                    button.id = buttonId;
                    button.textContent = this.nextElementSibling.querySelector('span').textContent;
                    checkedItemsContainer.appendChild(button);
                }
            } else {
                if (existingButton) {
                    existingButton.remove();
                }
            }
        });
    });

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const checkedItemsContainer = document.querySelector('.smart_filter_checked_items');

function removeCheckboxAndClickSubmit(button) {
        button.remove();
        const url = new URL(window.location).toString();
        const itemUrl = button.getAttribute('data-url'); // берем атрибут у кнопки, чтобу удалить из урл
        let newUrl;

        if (url.includes(`-${itemUrl}-or`)) {
            newUrl = url.replace(`-${itemUrl}-or`, '');
        } else {
            if (url.includes(`-is-${itemUrl}`)) { // тут изменение,т.к. у меня 'is' встречается чаще чем 'or'
                newUrl = url.replace(`-is-${itemUrl}`, '');
            } 
            else {
                newUrl = url.replace(`-${itemUrl}`, '');
            }
        }

        window.location.replace(newUrl);
   console.log(itemUrl);
}

checkedItemsContainer.addEventListener('click', (event) => {
    if (event.target.tagName === 'BUTTON') {
        removeCheckboxAndClickSubmit(event.target);
    }
});

function addCheckedButtonsOnLoad() {
    checkboxes.forEach((checkbox) => {
        if (checkbox.checked) {
            const buttonId = checkbox.id;
            const buttonData = checkbox.getAttribute('data-url'); // берем атрибуты у input checkbox
            const existingButton = checkedItemsContainer.querySelector(`#${buttonId}`);

            if (!existingButton) {
                const button = document.createElement('button');
                button.id = buttonId;
                button.textContent = checkbox.parentElement.querySelector('span').textContent; // тут изменение,т.к. у меня больше span в label
                button.setAttribute('data-url', buttonData); // добавляем атрибуты ко кнопкам
                checkedItemsContainer.appendChild(button);
            }
   console.log(buttonData);
        }
    });
}

addCheckedButtonsOnLoad();