动态html属性命名

Question

我有一个要列出的银行交易清单。我目前正在将引导程序用于HTML / CSS。我发现一些模板代码可以很好地完成我想做的事情，但是我遇到了一个问题：无法知道父元素折叠的div元素的ID。看到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 %}

子div元素的属性href，id，最重要的是aria-controls不能事先知道，因此不能与按钮单击正确关联。是否有可能做到这一点？在解决鸡蛋问题之前，它有点像鸡，所以我真的不知道该怎么办。