Создание выпадающего фильтра выбора

Question

Мне было интересно, могу ли я получить помощь в создании выпадающего фильтра для классов. Я смотрел на этот пример: https://codepen.io/luciopaiva/pen/YXYGYE?editors=101, но разница в том, что я использую Twig из плагина Advanced Custom Fields, поэтому я не могу вручную ввести данные в HTML. Вот HTML, который я использую. Я пытаюсь сделать так, как это фото. Смотрите изображение здесь: https://i.stack.imgur.com/I06cT.png У меня нет стиля, но это логика c Я пытаюсь достичь. По сути, я пытаюсь создать относительный фильтр, основанный на том, что нажимает посетитель, и отображать правильное поле ниже относительно курса. ПОЖАЛУЙСТА ПОМОГИ!! Спасибо!

HTML:

 <div class="course-selections filter-section without-background no-left-right">
    <div class="customlayout">
    {% set category = bloc.training_course_list_compact %}
    <h2 class="center-title">{{ category.headline }}</h2>
    <div class="inner-class-selection filter-inner-section">
        <div class="filter-courses filter-area">
          <div class="filter" id="course-solution">
            <div class="upper-filter"><h3>Solutions</h3><i class="fas fa-angle-down"></i></div>
            <div class="filter-dropdown">
            {% for category in bloc.training_course_list_compact.course_categories %}
            {% set titleupper = category.title %}
              <h4>{{ titleupper|e('wp_kses_post') }}</h4>
            {% endfor %}
            </div>
          </div>
          <div class="filter" id="course-type">
            <div class="upper-filter"><h3>Class Format</h3><i class="fas fa-angle-down"></i></div>
             <div class="filter-dropdown">
            {% 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"></div>
              {% elseif classformat == "Online" %}
                <div class="class-types type-filter online"></div> 
              {% endif %}
            {% endfor %}
            {% endfor %}
            {% endfor %}
          <div class="class-title-type type-filter lecture-type"><h4></h4><span></span>
            </div>
            <div class="class-title-type type-filter online-type"><h4></h4><span></span>
            </div>
          </div>
        </div>
        <div class="filter" id="course-location">
          <div class="upper-filter"><h3>Locations</h3><i class="fas fa-angle-down"></i></div>
          <div class="filter-dropdown">
          {% 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" data-value="{{ location.location }}"></div>
          {% endfor %}
          {% endfor %}
          {% endfor %}
          <div class="class-location type-filter"></div>
          </div>
        </div>
        <div class="filter" id="course-date">
          <div class="upper-filter"><h3>Start Date</h3><i class="fas fa-angle-down"></i></div>
          <div class="filter-dropdown">
          {% 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" data-value="{{ dates.date }}"></div>
          {% endfor %}
          {% endfor %}
          {% endfor %}
          <div class="class-date type-filter"></div>
        </div>
        </div>
      </div>
      <div class="class-blocks">
      {% 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 %}
          <div class="class-block">
            <a class="class-block-link" href="{{ link|e('esc_url') }}">
              <div class="image">
              </div>
                <h3>{{ title|e('wp_kses_post') }}</h3>
                <h4>{{ titleupper|e('wp_kses_post') }}</h4>
            </a>
            <a class="course-link" href="{{ link|e('esc_url') }}">Course</a>
          </div>
          {% endfor %}
      {% endfor %}
      </div>
    </div>
  </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"><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
    for (var dates in date_count) {
      $('.class-date').append(`<div class="inner-info"><h4>${dates}</h4><span>${date_count[dates]}</span></div>`)
    }
  });