Adding the ID or class into the exact match element

Question

Hi there I am expanding on my previous post: Jquery matching values. I was wondering if anyone knows how to have this also filter the ID or Class as it is doing with the data value. I am trying to build a filter like this in the end and have repeating elements show how many times they are repeated. I use TWIG for the HTML from Advanced Custom Fields Wordpress plugin.

Eventually I want this to be a dropdown like: https://i.stack.imgur.com/I06cT.png you can refer to this post: Building a dropdown select filter. Let me know if you have any direction how i should proceed! Thank you!!

I am also trying to make this sort both alphabetically for the locations and sort by date for the date section. This is the format of the date: February 26, 2020.

HTML:

<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">
  {% 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 %}
  <div class="class-location type-filter"></div>
  </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">
  {% 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 %}
  <div class="class-date type-filter"></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>`)
    }
  });