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

Question

У меня есть 7 флажков, каждый из которых представляет категорию, значение флажка - это идентификатор категории (Wordpress). Затем я беру тот же идентификатор категории из флажка и создаю соответствующий класс для «архива», который я хочу показать / скрыть.

Например, если флажок имеет значение «9», поле архива будет иметь соответствующий класс под названием «cat-9».

Если этот флажок установлен, я хочу отображать только «архивные ящики», содержащие соответствующий класс, и скрывать «архивные ящики», которые не содержат соответствующий класс.

Проблема:

1. Когда я устанавливаю несколько флажков, он не фильтрует и не отображает элементы, которые содержат только комбинацию выбранных категорий.

HTML:

<div class="container">
  <h2 class="entry-title text-center pt-5">Market Place</h2>
  <p class="text-center">Filter providers by service and click on the logos shown below for more information and to contact a representative of the risk solution provider.</p>
  <div class="category-search-box text-center"><?php echo do_shortcode( '[searchandfilter types=",checkbox,checkbox" fields="provider,categories"]' ); ?></div>
  <div class="row py-5">
    <?php if (have_posts()) : while (have_posts()) :the_post();
          $taxonomy = wp_get_object_terms($post->ID, 'categories');
          $ids = "";

          foreach ($taxonomy as $cat) {
           $ids .= "cat-".$cat->term_id ." ";
         }
        ?>
      <div class="col-6 col-md-4 text-center">
        <div id="provider-archive-boxes" class="provider-archive-box <?php echo $ids; ?>">
          <a href="<?php echo the_permalink();?>"><?php the_post_thumbnail( 'full', array( 'class' => 'img-responsive' ) ); ?></a>
          <p><strong><?php the_title();?></strong></p>
        </div>
      </div>
    <?php endwhile; ?>
    </div>
  <?php endif; ?>
</div>

JS:

const checkboxes = document.querySelectorAll('.cat-item input[type="checkbox"]');
const archiveBoxes = document.querySelectorAll('#provider-archive-boxes');

checkboxes.forEach(function(checkbox){

  checkbox.addEventListener('change', (e)=>{
    let isChecked = checkbox.checked;

    archiveBoxes.forEach(function(archive){
      let category = e.target.value;
      if (isChecked && archive.classList.contains(`cat-${category}`)) {
        archive.parentElement.style.display = "block";
      }else if (!isChecked) {
        archive.parentElement.style.display = "block";
      }else {
        archive.parentElement.style.display = "none";
      }
    });

  });
});