How to implement class filtering and load more in one block?

Question

JavaScript

Hi everybody!
I ask for help, because I'm already completely confused.
I can't figure out how to properly adapt the script to load posts by clicking on "view more"... it conflicts with the card filter. A class is added in one case (hide, written in css ), and in the case of post loading, display: none is added directly inline. and therefore the filter does not work correctly for all posts
there is such a catalog with cards (loading posts works here, but the filter breaks)
https://runar.pw/tests/catalog/
filtering should also work and show more content when you click on "see more ".
When I stick the script for "watch more" it starts to conflict with the filter. Only the https://runar
filter works here .

js:

// Начало скрипта для фильтра карточек

// Проверка на наличие класса hide 
var checkClass = function () {
  if ($('.section-5__card').hasClass('hide')) {
    $('.section-5__card').removeClass('hide');
  }
};


// Фильтр категорий
$(document).ready(function () {
  $('.filter-nav__reset').click(function () {
    checkClass();
  });
  $('.slick-slide.filt-her').click(function () {
    checkClass();
    $('.section-5__card:not(.filt-her)').toggleClass('hide');
  });
  $('.filt-sedan').click(function () {
    checkClass();
    $('.section-5__card:not(.filt-sedan)').toggleClass('hide');
  });
  $('.filt-small-crossover').click(function () {
    checkClass();
    $('.section-5__card:not(.filt-small-crossover)').toggleClass('hide');
  });
  $('.filt-hetchback').click(function () {
    checkClass();
    $('.section-5__card:not(.filt-hetchback)').toggleClass('hide');
  });
  $('.filt-coupe').click(function () {
    checkClass();
    $('.section-5__card:not(.filt-coupe)').toggleClass('hide');
  });
  $('.filt-hybrid').click(function () {
    checkClass();
    $('.section-5__card:not(.filt-hybrid)').toggleClass('hide');
  });
  $('.filt-full-crossover').click(function () {
    checkClass();
    $('.section-5__card:not(.filt-full-crossover)').toggleClass('hide');
  });
  $('.filt-recommend').click(function () {
    checkClass();
    $('.section-5__card:not(.filt-recommend)').toggleClass('hide');
  });


  // Активное состояние кнопки
  $('.filter-nav__button').click(function () {
    $('.filter-nav__button').removeClass('filtBtn-active');
    $(this).addClass('filtBtn-active');
  })
  $('.filter-nav__reset').click(function () {
    $('.filter-nav__button').removeClass('filtBtn-active');
    $(this).addClass('filtBtn-active');
  })
  // Конец скрипта для фильтра карточек
});

// Показать еще контент
$(document).ready(function () {

  let list = $(".cards-wrap .section-5__card");
  let numToShow = 6;
  let button = $("#loadMore2");
  let numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();

  button.click(function () {
    let showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    let nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
  });
});

Answer 1

one)

let showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();

First - why showing-1? What if showing = 0? And since you set list outside the handler, it is static.
You can see which elements do not have the hide class and already display elements in it with show()
But of course, it's better to rewrite it normally so that the filter value is stored in the button. There is also a bug - when you apply the filter again - Show More automatically works.