Почему не корректно работают функции JS при изменении ориентации экрана?

Дизайнер задумал, что фильтр карточек на десктопе и на мобильном устройстве работает по разному.

На десктопе можно выбрать только одну категорию, при нажатии на кнопку она подсвечивается и отображаются все карточки ее категории. На мобильном устройстве появляются кнопки применить и отмена, и можно выбрать несколько категорий. При клике по каждой кнопке они подсвечиваются и отображают карточки своих категорий. При повторном клике соответственно скрывают карточки своей категории и перестают светиться.

Я сделал две функции. Вызываю их при разном разрешении экранов, а так же вызываю их при срабатывании события изменения ориентации экрана.

Вопрос: почему при загрузке страницы срабатывает нужный код, в зависимости от разрешения экрана, а при изменении ориентации при клике по кнопкам к карточкам добавляются классы и из одной и из другой функции сразу, а к самим кнопкам класс эктив добавляется только при десктопном разрешении экрана, а на мобильном устройстве не добавляется вообще.

Посмотреть можно по ссылке как работает: https://thesplatt-web.github.io/iceberg-test/portfolio.html

HTML

<button class="portfolio__btn" type="button" title="Смотреть категорию" data-filter="group1"></button>
<button class="portfolio__btn" type="button" title="Смотреть категорию" data-filter="group2"></button>
<button class="portfolio__btn" type="button" title="Смотреть категорию" data-filter="group3"></button>
<button class="portfolio__btn" type="button" title="Смотреть категорию" data-filter="group4"></button>
<button class="portfolio__btn" type="button" title="Смотреть категорию" data-filter="group5"></button>


<div class="portfolio__item group1"></div>
<div class="portfolio__item group2"></div>
<div class="portfolio__item group3"></div>
<div class="portfolio__item group4"></div>
<div class="portfolio__item group5"></div>

JS

let sidebarBtn = document.querySelectorAll('.portfolio__btn');//Ищем все кнопки
    let casesCard = document.querySelectorAll('.portfolio__item');//Ищем все карточки

    let filterCategoriesMobile = function () {//Функция для
        for (let button of sidebarBtn) {//Перебираем все кнопки
            let currentCategory = button.dataset.filter;//Проверяем значение дата-атрибута
            button.addEventListener('click', function () {//Отлавливаем событие клика по кнопке
                button.classList.toggle('active');//Добавляем/удаляем класс active
                let currentCard = document.getElementsByClassName(currentCategory);//Ищем карточки с классом равным дата-атрибуту активной кнопки
                for (let currentCardItem of currentCard) {//Перебираем все карточки с слассом равным дата-атрибуту активной кнопки
                    currentCardItem.classList.toggle('active')//Показываем/скрываем все карточки с классом равным дата-атрибуту активной кнопки
                    for (let card of casesCard) {//Перебираем все карточки
                        let activeCard = document.querySelector('.portfolio__item.active')//Проверяем есть ли на странице хотя бы одна активная карточка
                        if (activeCard) {//Если есть, то скрываем её
                            card.classList.add('hide-mobile')
                        }
                        if (!activeCard) {//Если нет, то не скрываем
                            card.classList.remove('hide-mobile')
                        }
                    }
                }
            });
        }
    }
    if (document.documentElement.clientWidth < 768) {//Вызываем функцию, если ширина окна меньше чем 768 пикселей
        filterCategoriesMobile()
    }

    let filterCategories = function () {//Функция для мобильного устройства
        for (let button of sidebarBtn) {//Перебираем все кнопки
            let currentCategory = button.dataset.filter;//Проверяем значение дата-атрибута
            button.addEventListener('click', function () {//Отлавливаем событие клика по кнопке
                for (let i = 0; i < sidebarBtn.length; i++) {//Удаляем у все кнопок класс active
                    let button = sidebarBtn[i];
                    button.classList.remove('active')
                }
                button.classList.add('active');//Добавляем класс active только выбранной кнопке
                for (let i = 0; i < casesCard.length; i++) {//Скрываем все карточки
                    let card = casesCard[i];
                    card.classList.add('hide')
                    card.ontransitionend = function () {
                        if (card.classList.contains('hide')) {
                            card.classList.add('hidden')
                        }
                    }
                }
                let currentCard = document.getElementsByClassName(currentCategory);//Ищем только карточки содержащие класс равный дата-атрибуту активной кнопки
                for (let currentCardItem of currentCard) {//Показываем только те карточки, которые содержат класс равный дата-атрибуту активной кнопки
                    currentCardItem.classList.remove('hide')
                    currentCardItem.classList.remove('hidden')
                }
            });
        }
    }
    if (document.documentElement.clientWidth >= 768) {//Вызываем функцию, если ширина окна больше или равна 768 пикселей
        filterCategories();
    }
    window.addEventListener('orientationchange', () => {//Отслеживаем событие изменения ориентации экрана
        if (document.documentElement.clientWidth > 768) {//Если ширина экрана больше чем 768 запускаем функцию для десктопа
            filterCategories();
        } else {//Если меньше, то для мобильного
            filterCategoriesMobile();
        }
    });

Вопрос так и не решен. Решили отказаться от этой идеи и сделали одинаковую фильтрацию контента на всех устройствах.