Building a dropdown filter - html

Question

I was wondering if I can have assistance with building a dropdown filter for classes. I was looking at this example: https://codepen.io/luciopaiva/pen/YXYGYE?editors=101 but the difference is that I am using Twig from Advanced Custom Fields Plugin so I cannot manually input the data into the HTML. Here is the HTML I am using. I am trying to make it like this photo. See image here I don't have styling, but this is the logic I am trying to achieve. Basically I am trying to build a relative filter based on what the visitor clicks and have the correct box show below relative to the course. PLEASE HELP!! Thank you!
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>