I have something similar working using the regroup filter in Django template language. Here is an excerpt from my code where I have a Bootstrap accordion collapsing member assignments by year, member.committee_memberships.year_served in my model:

{% if member.committee_memberships.exists %}
  {% regroup member.committee_memberships.all by year_served as assignments_by_year %}
  <div class="card">
    <div class="card-body">
      <h3 class="card-title">
        Committee{{ member.committee_memberships.count|pluralize }} Served
      </h3>

      <div class="accordion" id="assignments-accordion">
        {% for year in assignments_by_year %}
          <div class="card">
            <div class="card-header" id="heading-{{ year.grouper.year }}">
              <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left card-link{% if not forloop.first %} collapsed{% endif %}"
                        type="button" data-toggle="collapse" data-target="#collapse-{{ year.grouper.year }}"
                        aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                        aria-controls="collapse-{{ year.grouper.year }}">
                  {{ year.grouper }}
                </button>
              </h2>
            </div>

            <div id="collapse-{{ year.grouper.year }}" class="collapse{% if forloop.first %} show{% endif %}"
                 aria-labelledby="heading-{{ year.grouper.year }}"
                 data-parent="#assignments-accordion">
              <div class="card-body">
                <div class="list-group list-group-flush">

                  {% for assignment in year.list %}
                    <a href="{% url 'committees:detail_by_year' slug=assignment.committee.slug year=assignment.year_served.year %}"
                       class="list-group-item list-group-item-action border-bottom-0">
                      <strong>{{ assignment.committee }}</strong>
                    </a>
                  {% endfor %}

                </div>
              </div>
            </div>
          </div>
        {% endfor %}

      </div>
    </div>
  </div>
{% endif %}

See if you can adapt this for your use case. Comments are welcome, I'll try to help out as you get further along the path.