Как совместить автоподгрузку контента с фильтрацией?

Помогите, пожалуйста, реализовать код.

У меня есть фильтр, который состоит из кнопок с data атрибутом data-filter

<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>

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

<button class="portfolio__all" type="button" title="Все категории" data-filter="all">Все кейсы</button>

function filterCategories() {
    const allBtn = document.querySelector('.portfolio__all'); //Ищем кнопку для всех категорий
    const sidebarBtn = document.querySelectorAll('.portfolio__btn');//Ищем все кнопки
    const casesCard = document.querySelectorAll('.portfolio__item');//Ищем все карточки
    for (const button of sidebarBtn) {//Перебираем карточки
        const currentCategory = button.dataset.filter;//Проверяем значение дата атрибута каждой кнопки
        button.addEventListener('click', function () {//Кликаем по кнопке
            for (let i = 0; i < sidebarBtn.length; i++) {
                let button = sidebarBtn[i];
                button.classList.remove('active')//Делаем все кнопки не активными
            }
            button.classList.add('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')
                    }
                }
            }
            const currentCard = document.getElementsByClassName(currentCategory);//Ищем карточки активной категории
            for (const currentCardItem of currentCard) {//Отображаем карточки активной категории
                currentCardItem.classList.remove('hide')
                currentCardItem.classList.remove('hidden')
            }
        });
    }
    allBtn.addEventListener('click', function () {//При нажатии на кнопку "все кейсы" удаляем все классы у кнопок и карточек, тем самым показываем все карточки всех категорий
        for (const button of sidebarBtn) {
            button.classList.remove('active')
        }
        for (const card of casesCard) {
            card.classList.remove('active')
            card.classList.remove('hide-mobile')
            card.classList.remove('hide')
            card.classList.remove('hidden')
        }
    })
}
filterCategories();

Есть функция, которая отлавливает момент, в который нужно подгрузить контент

const loadMoreBlock = document.querySelector('.portfolio__content')

function LoadMore() {
    const loadMoreBlockPos = loadMoreBlock.getBoundingClientRect().top + pageXOffset;
    const loadMoreBlockHeight = loadMoreBlock.offsetHeight;

    if (pageXOffset > (loadMoreBlockPos + loadMoreBlockHeight) - windowHeight - 300) {
        getContent();
    }

}

async function getContent() {
    //Тут должен быть код для автоподгрузки контента
}
window.addEventListener('scroll', lazyScroll);

function lazyScroll() {
    if (!loadMoreBlock.classList.contains('loading')) {
        LoadMore();
        filterCategories();
    }
}

Я не понимаю как подгружать контент. Бэкенд говорит что нужно передавать в скрипт cases.php нужные категории карточек, в ответ будет приходить json с массивом объектов. Но нужно же еще как то отслеживать выбрана ли категория, если нет то передавать все категории, если да, то передавать только ту что выбрана. И что будет если после атоподгрузки карточек из одной категории пользователь возьмет и переключит на другую категорию? Может кто-нибудь помочь мне с решением этой задачи? Или хотя бы направить в нужное русло. Я не знаю как работает ajax и json:(