Раскрывающийся фильтр множественного выбора не работает

Question

Я пытался использовать следующий код для достижения этого типа фильтра (https://codepen.io/angelagiese/pen/xPVgPv) (https://i.stack.imgur.com/I06cT.png), но он не работает для меня. Может кто-нибудь, пожалуйста, помогите! Я использую TWIG из расширенных пользовательских полей плагин WordPress также.

HTML:

<div class="inner-class-selection padding-spacing-heading filter-inner-section filtering">
    <!-- filter area -->
    <div class="filter-courses filter-area filter-cat">
      <div class="filter" name="course-solution" id="course-solution">
        <div class="upper-filter"><h3>Solutions</h3><i class="fas fa-angle-down"></i></div>
        <div class="filter-dropdown">
          <select class="cat1">
            <option class="all-cat" value="cat-all"><h3>Solutions</h3></option>
          {% for category in bloc.training_course_list_compact.course_categories %}
          {% set titleupper = category.title %}
             <option class="{{ category.category_class }}" value="{{ titleupper|e('wp_kses_post') }}"><h4>{{ titleupper|e('wp_kses_post') }}</h4></option>
          {% endfor %}
          </select>
        </div>
      </div>
      <div class="filter" name="course-type" id="course-type">
        <div class="upper-filter"><h3>Class Format</h3><i class="fas fa-angle-down"></i></div>
         <div class="filter-dropdown">
          <select class="cat2">
            <option class="all-cat" value="cat-all"><h3>Class Format</h3></option>
            {% for category in bloc.training_course_list_compact.course_categories %}
            {% for course in category.get_field('courses') %}
             {% for classformats in course.get_field('dates') %}
              {% set classformat = classformats.class_format %}
               {% if classformat == "Lecture" %}
                <div class="class-types type-filter lecture {{ category.category_class }}"><span class="{{ course.course_title }}"></span></div>
              {% elseif classformat == "Online" %}
                <div class="class-types type-filter online {{ category.category_class }}"><span class="{{ course.course_title }}"></span></div> 
              {% endif %}

            {% endfor %}
            {% endfor %}
            {% endfor %}
          <option class="class-title-type type-filter lecture-type" value="lecture-type"><h4></h4><span></span>
          </option>
          <option class="class-title-type type-filter online-type" value="online-type"><h4></h4><span></span>
          </option>
        </select>
      </div>
    </div>
    <div class="filter" name="course-location" id="course-location">
      <div class="upper-filter"><h3>Locations</h3><i class="fas fa-angle-down"></i></div>
      <div class="filter-dropdown">
        <select class="cat3">
        <option class="all-cat" value="cat-all"><h3>Class Format</h3></option>
        {% for category in bloc.training_course_list_compact.course_categories %}
        {% for locationcourse in category.get_field('courses') %}
        {% for location in locationcourse.get_field('dates') %}
          <div class="course-location {{ category.category_class }}" id="{{ category.category_class }}" data-value="{{ location.location }}"><span class="{{ locationcourse.course_title }}"></span></div>
        {% endfor %}
        {% endfor %}
        {% endfor %}
        <option class="class-location type-filter"></option>
      </select>
      </div>
    </div>
    <div class="filter" name="course-date" id="course-date">
      <div class="upper-filter"><h3>Start Date</h3><i class="fas fa-angle-down"></i></div>
      <div class="filter-dropdown">
        <select class="cat4">
          <option class="all-cat" value="cat-all"><h3>Start Date</h3></option>
          {% for category in bloc.training_course_list_compact.course_categories %}
          {% for datecourse in category.get_field('courses') %}
          {% for dates in datecourse.get_field('dates') %}
            <div class="course-date {{ category.category_class }}" id="{{ category.category_class }}" data-value="{{ dates.date }}"><span class="{{ locationcourse.course_title }}"></span></div>
          {% endfor %}
          {% endfor %}
          {% endfor %}
          <option class="class-date type-filter"></option>
        </select>
      </div>
    </div>
  </div>
  <!-- end filter area -->   
  <!-- block area -->
  <div class="class-blocks filter-cat-results">
  {% for category in bloc.training_course_list_compact.course_categories %}
  {% set thumbnail = category.thumbnail %}
  {% set link = category.link %}
  {% set titleupper = category.title %}
      {% for course in category.get_field('courses') %}
      {% set link = course.link %}
      {% set title = course.title %}
      {% set photoimgs = course.get_field('course_image') %}
      {% set courseimg = TimberImage(photoimgs.image) %}
      <div class="class-block f-cat">
        {% for classformats in course.get_field('dates') %}
          {% set classformat = classformats.class_format %}
           {% if classformat == "Lecture" %}
              {% set classtype = "Lecture" %}
          {% elseif classformat == "Online" %}
              {% set classtype = "Online" %} 
          {% endif %}
        <div class="filter-assignments" data-cat="{{ titleupper|e('wp_kses_post') }}" data-cat2="{{ classtype }}" data-cat3="{{ classformats.location}}" data-cat4="{{ classformats.date }}"></div>
        {% endfor %}
        <a class="class-block-link" href="{{ link|e('esc_url') }}">
          {% if courseimg is not empty %}
          <div class="image"><a class="class-block-link" href="{{ link|e('esc_url') }}">
            <img src="{{ Image(courseimg).src }}" alt="{{ photoimgs.alt }}"></a>
          </div>
          {% else %}
          <div class="image default-img"><a class="class-block-link" href="{{ link|e('esc_url') }}">
            <img src="/wp-content/uploads/education-Image-filler.png" alt="Blue background with {{ title }} white title."><h4>{{ title }}</h4></a>
          </div>
          {% endif %}
          <div class="inner-course">
            <h3>{{ title|e('wp_kses_post') }}</h3>
            <h4 class="course-solution">{{ titleupper|e('wp_kses_post') }}</h4>
            <p class="course-type"></p>
            <p class="course-location"></p>
            <p class="course-date"></p>
          </div>
        </a>
        <div class="course-outer-link absolute-btn"><a class="course-link" href="{{ link|e('esc_url') }}">Course</a></div>
      </div>
      {% endfor %}
  {% endfor %}
  </div>
<!-- end block area -->
</div>

JQUERY:

  //Location Filter
  // Extract the values to an array
  $("#course-location").each(function() {
    let locations = $('.course-location').map((i, e) => $(e).data('value')).toArray();

    let reducer = (a, c) => {
      // If the city doesn't exist 
      a[c] === undefined ?
        a[c] = 1 : // One occurrence, else
        a[c] = a[c] + 1;  // Increment count
      return a;
    }

    let location_count = locations.reduce(reducer, {});

    // Create HTML Elements
    for (var place in location_count) {
      $('.class-location').append(`<div class="inner-info" value="${place}"><h4>${place}</h4><span>${location_count[place]}</span></div>`)
    }
  });

  //Date Filter
  // Extract the values to an array
  $("#course-date").each(function() {
    let date = $('.course-date').map((i, e) => $(e).data('value')).toArray();

    let reducer = (a, c) => {
      // If the date doesn't exist 
      a[c] === undefined ?
        a[c] = 1 : // One occurrence, else
        a[c] = a[c] + 1;  // Increment count
      return a;
    }

    let date_count = date.reduce(reducer, {});

    // Create HTML Elements
    var i = 0;
    for (var dates in date_count) {
      $('.class-date').eq(i).val(dates).append(`<h4>${dates}</h4><span>${date_count[dates]}</span>`);
      i++;
    }
  });

  //Education Filter 
  var filterActive;

  function filterCategory(cat1, cat2, cat3, cat4) {

      // reset results list
      $('.filter-cat-results .f-cat').removeClass('active');

      // the filtering in action for all criteria
      var selector = ".filtering .f-cat .filter-assignments";
      if (cat1 !== 'cat-all') {
           selector = '[data-cat=' + cat1 + "]";
      }
      if (cat2 !== 'cat-all') {
          selector = selector + '[data-cat2=' + cat2 + "]";
      }
      if (cat3 !== 'cat-all') {
          selector = selector + '[data-cat3=' + cat3 + "]";
      }
      if (cat4 !== 'cat-all') {
          selector = selector + '[data-cat3=' + cat3 + "]";
      }

      // show all results
      $(selector).parents(".f-cat").addClass('active');

      // reset active filter
      filterActive = cat1;
  }

  // start by showing all items
  $('.filtering .f-cat').addClass('active');

  // call the filtering function when selects are changed
  $('.filtering select').change(function() {

      filterCategory($('.filtering select.cat1').val(), $('.filtering select.cat2').val(), $('.filtering select.cat3').val());

  });

JQUERY попытка сделать точное соответствие и присвойте ему значение параметра для местоположения класса и даты класса.

  //Location Filter
  // Extract the values to an array
  $("#course-location").each(function() {
    let locations = $('.course-location').map((i, e) => $(e).data('value')).toArray();

    let reducer = (a, c) => {
      // If the city doesn't exist 
      a[c] === undefined ?
        a[c] = 1 : // One occurrence, else
        a[c] = a[c] + 1;  // Increment count
      return a;
    }

    let location_count = locations.reduce(reducer, {});

    // Create HTML Elements
    for (var place in location_count) {
      $('.class-location').append(`<div class="inner-info" value="${place}"><h4>${place}</h4><span>${location_count[place]}</span></div>`)
    }
  });

  //Date Filter
  // Extract the values to an array
  $("#course-date").each(function() {
    let date = $('.course-date').map((i, e) => $(e).data('value')).toArray();

    let reducer = (a, c) => {
      // If the date doesn't exist 
      a[c] === undefined ?
        a[c] = 1 : // One occurrence, else
        a[c] = a[c] + 1;  // Increment count
      return a;
    }

    let date_count = date.reduce(reducer, {});

    // Create HTML Elements
    var i = 0;
    for (var dates in date_count) {
      $('.class-date').eq(i).val(dates).append(`<h4>${dates}</h4><span>${date_count[dates]}</span>`);
      i++;
    }
  });

  //Location Filter
  // Extract the values to an array
  $("#course-location").each(function() {
    let locations = $('.course-location').map((i, e) => $(e).data('value')).toArray();

    let reducer = (a, c) => {
      // If the city doesn't exist 
      a[c] === undefined ?
        a[c] = 1 : // One occurrence, else
        a[c] = a[c] + 1;  // Increment count
      return a;
    }

    let location_count = locations.reduce(reducer, {});

    // Create HTML Elements
    for (var place in location_count) {
      $('.class-location').append(`<div class="inner-info" value="${place}"><h4>${place}</h4><span>${location_count[place]}</span></div>`)
    }
  });

  //Date Filter
  // Extract the values to an array
  $("#course-date").each(function() {
    let date = $('.course-date').map((i, e) => $(e).data('value')).toArray();

    let reducer = (a, c) => {
      // If the date doesn't exist 
      a[c] === undefined ?
        a[c] = 1 : // One occurrence, else
        a[c] = a[c] + 1;  // Increment count
      return a;
    }

    let date_count = date.reduce(reducer, {});

    // Create HTML Elements
    var i = 0;
    for (var dates in date_count) {
      $('.class-date').eq(i).val(dates).append(`<h4>${dates}</h4><span>${date_count[dates]}</span>`);
      i++;
    }
  });