Динамическое именование атрибутов html

Question

У меня есть список банковских операций, которые я перечисляю. В настоящее время я использую загрузчик для моего HTML / CSS. Я нашел некоторый шаблонный код, который работает достаточно хорошо для того, что я хочу сделать, но я столкнулся с проблемой: нет способа узнать идентификатор сворачивающегося элемента div для родительского элемента. Проще увидеть HTML, чем объяснить:

{% for key, value in transactions.items %}
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="heading-1">
          <h5 class="mb-0">
            <a role="button" data-toggle="collapse" href="#whatid" aria-expanded="true" aria-controls="whatid">
              {{ key }}
            </a>
          </h5>
        </div>

          {% for key2, value2 in value.items %}
        <div id="whatid" class="collapse show" data-parent="#accordion" aria-labelledby="heading-1">
          <div class="card-body">

            <div id="accordion-1">
              <div class="card">
                <div class="card-header" id="heading-1-1">
                  <h5 class="mb-0">
                    <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
                      {{ key2 }}
                    </a>
                  </h5>
                </div>

                  {% for tr in value2 %}
                  <div id="collapse-1-1">{{ tr.description }}</div>
                  {% endfor %}

              </div>
            </div>

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

Атрибуты href, id и, что наиболее важно, aria-controls дочернего элемента div не могут быть известны заранее и, следовательно, не будут правильно связаны с нажатием кнопки. Можно ли сделать это? Перед проблемой с яйцами это немного курица, поэтому я не знаю, что делать.