I have a page with two filter groups: one for topic and one for format. The filter should select the associated cards and display them while preserving the respective section headers that the cards are in. If no results are found, a "no results" div is displayed.

I have it set up and this works for the most part. However, I noticed that in my "format" filter group* that only the first item preserves the group headings - the other filter items combine all the cards together while throwing in some random section headers. For the life of me, I can't figure out what's happening.

*I put everything in this Codepen here.

I'm not sure if it's getting thrown off somewhere because of this section using the parent reference?

$(".card").hide().filter($filteredResults).show();
  var all_hidden = true;
  $(".card").each(function (index) {
    if ($(this).is(":visible")) {
      all_hidden = false;
      $(this).parent().prev(".section-header").css("display", "block");
    } else {
      console.log("this happened");
      $(this).parent().prev(".section-header").css("display", "none");
    }
  });