Множественный data-category

Существует следующая страница с фильтром через checkbox

<!-- FILTER CHECKBOX -->
<div class="form-check">
  <label><input class="cardCheckBox" type="checkbox" value="foo"> foo</label>
</div>
<div class="form-check">
  <label><input class="cardCheckBox" type="checkbox" value="xyz"> xyz</label>
</div>

<!-- CARDS LIST I WANT TO FILTER -->
<div class="cards-list mt-2">

  <div class="card" data-category="foo">
    <div class="card-body">
      <h2>foo 1</h2>
    </div>
  </div>

  <div class="card" data-category="xyz">
    <div class="card-body">
      <h2>xyz 1</h2>
    </div>
  </div>

  <div class="card" data-category="foo">
    <div class="card-body">
      <h2>foo 2</h2>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.card.is-hidden {
  display: none;
}
</style>
<script>
// Cache your elements
const $cards = $("[data-category]");
const $cardsCkb = $(".cardCheckBox");

$cardsCkb.on("change", function() {
  
  // Create an Array of checked values
  const checkedArr = $cardsCkb.filter(":checked").get().map(el => el.value);
  
  // Show all and exit if no filter is active
  if (!checkedArr.length) return $cards.removeClass("is-hidden");
    
  // Finally, use jQuery's .toggleClass() and JS's Array.prototype.includes()
  $cards.each(function() {
    const category = $(this).data("category");
    $(this).toggleClass("is-hidden", !checkedArr.includes(category));
  });

});
</script>

Не могу понять, что нужно добавить в скрипт, если в data-category много категорий находится, как тогда фильтром выводить div? Что добавить?

Много типа: <div class="card" data-category="foo,xoo,zzz">