Как описать логику кнопки «Показать еще» внутри фильтра с множественным выбором?

Question

[svm2001]

Вопрос в следующем: у меня есть кнопки-фильтры. Есть карточки. Фильтры работают. Все переключают. Можно выбрать либо один фильтр либо несколько, хоть все.
Под карточками кнопка "показать еще".
Изначально показывается только 6 карточек. При клике на кнопку - еще 3. И так далее.
Если страница загружается и я не трогаю фильтры - все в порядке. карточки показываются по 3 штуки. Но стоит мне переключить фильтр - ломается. Я не могу понять, как мне описать логику. Кто уже делал - хелп(

<div class="tabs">

    <button class="btn btn--white tabs__item js-filter-button active " type="button" data-category="all"
            data-selected="true">
        <span class="btn__text">Все статьи</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="latest"
            data-selected="false">
        <span class="btn__text">Последние новости</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="events"
            data-selected="false">
        <span class="btn__text">Мероприятия</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="discuss"
            data-selected="false">
        <span class="btn__text">Обсуждения</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="live"
            data-selected="false">
        <span class="btn__text">Жизнь комплекса</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="analytic"
            data-selected="false">
        <span class="btn__text">Квартирная аналитика</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="standart"
            data-selected="false">
        <span class="btn__text">Стандартизация</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="value1"
            data-selected="false">
        <span class="btn__text">tabs_value-1</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="value2"
            data-selected="false">
        <span class="btn__text">tabs_value-2</span>
    </button>

    <button class="btn btn--white tabs__item js-filter-button " type="button" data-category="value3"
            data-selected="false">
        <span class="btn__text">tabs_value-3</span>
    </button>

</div>

<div class="cards" style="margin-bottom: 20px">
    <div class="card" data-category="latest" data-card-selected="data-card-selected"> 1</div>
    <div class="card" data-category="latest" data-card-selected="data-card-selected"> 1</div>
    <div class="card" data-category="events" data-card-selected="data-card-selected"> 2</div>
    <div class="card" data-category="events" data-card-selected="data-card-selected"> 2</div>
    <div class="card" data-category="events" data-card-selected="data-card-selected"> 2</div>
    <div class="card" data-category="discuss" data-card-selected="data-card-selected">3</div>
    <div class="card hidden" data-category="discuss" data-card-selected="data-card-selected">3</div>
    <div class="card hidden" data-category="live" data-card-selected="data-card-selected"> 4</div>
    <div class="card hidden" data-category="live" data-card-selected="data-card-selected"> 4</div>
    <div class="card hidden" data-category="live" data-card-selected="data-card-selected"> 4</div>
    <div class="card hidden" data-category="analytic" data-card-selected="data-card-selected"> 5</div>
    <div class="card hidden" data-category="analytic" data-card-selected="data-card-selected"> 5</div>
    <div class="card hidden" data-category="analytic" data-card-selected="data-card-selected"> 5</div>
    <div class="card hidden" data-category="standart" data-card-selected="data-card-selected"> 6</div>
    <div class="card hidden" data-category="standart" data-card-selected="data-card-selected"> 6</div>
    <div class="card hidden" data-category="value1" data-card-selected="data-card-selected"> 8</div>
    <div class="card hidden" data-category="value2" data-card-selected="data-card-selected"> 9</div>
    <div class="card hidden" data-category="value3" data-card-selected="data-card-selected"> 10</div>
</div>

<button class="btn btn--black js-show-more " type="button">
    <span class="btn__text">Показать ещё</span>
</button>

// Фильтрация
    const filterButtons = document.querySelectorAll('.js-filter-button');
    const cards = document.querySelectorAll('.card');

    filterButtons.forEach(button => {
        button.addEventListener('click', (e) => {

            const category = button.getAttribute('data-category');
            const isSelected = button.getAttribute('data-selected') === 'true';

            if (category === 'all') {
                filterButtons.forEach(btn => {
                    btn.classList.remove('active');
                    btn.setAttribute('data-selected', 'false');
                });
                cards.forEach(card => {
                    card.removeAttribute('data-card-unselected');
                    card.setAttribute('data-card-selected', 'true');
                });
                button.classList.add('active');
            } else {
                button.setAttribute('data-selected', isSelected ? 'false' : 'true');
                filterButtons[0].setAttribute('data-selected', 'false');
                if (isSelected) {
                    button.classList.remove('active');
                } else {
                    button.classList.add('active');
                }
            }

            cards.forEach(card => {
                const cardCategory = card.getAttribute('data-category');
                const isAnySelected = Array.from(filterButtons).some(
                    btn => btn.getAttribute('data-selected') === 'true'
                );

                if (isAnySelected) {
                    const matchCategory = Array.from(filterButtons).some(
                        btn => btn.getAttribute('data-category') === cardCategory && btn.getAttribute('data-selected') === 'true'
                    );

                    if (matchCategory) {
                        card.removeAttribute('data-card-unselected');
                        card.setAttribute('data-card-selected', 'true');
                    } else {
                        card.setAttribute('data-card-unselected', 'true');
                        card.removeAttribute('data-card-selected');
                    }
                } else {
                    card.removeAttribute('data-card-unselected');
                    card.setAttribute('data-card-selected', 'true');
                }
            });

            const allSelected = Array.from(filterButtons).every(
                btn => btn.getAttribute('data-selected') === 'false'
            );
            if (allSelected) {
                filterButtons[0].classList.add('active');
            } else {
                filterButtons[0].classList.remove('active');
            }
        });
    });

    // Работа кнопки "Показать еще"
    let visibleCardsStart = 6
    const activeCardsStart = document.querySelectorAll('[data-card-selected]');
    const showMoreButton = document.querySelector('.js-show-more');
    if(showMoreButton && activeCardsStart.length > 0) {
        let increment = 3;

        for (let i = 0; i < visibleCardsStart; i++) {
            activeCardsStart[i].classList.remove('hidden')
        }
        for (let i = visibleCardsStart; i < activeCardsStart.length; i++) {
            activeCardsStart[i].classList.add('hidden')
        }

        showMoreButton.addEventListener('click', function() {
            for (let i = visibleCardsStart; i < Math.min(visibleCardsStart + increment, activeCardsStart.length); i++) {
                activeCardsStart[i].classList.remove('hidden')
            }
            visibleCardsStart += increment;

            if (visibleCardsStart >= cards.length) {
                showMoreButton.style.display = 'none';
            }
        });
    }