如何使用每个关联的按钮为动态唯一ID应用数据目标折叠

Question

我在Django模板中使用bootstrap-4折叠，我希望卡片应该与相关的按钮一起折叠，在这里我为与卡片折叠ID匹配的数据目标提供唯一ID，但无法正常工作。尽管所有元素都显示为带有关联卡片的多个按钮。但是卡片并未折叠。

我尝试了简单的变量名（例如：data-target =＃demo，data-toggle =崩溃），并且在卡中我提供了相同的ID（id = demo类=崩溃）。

{% if translator.task_set.all %}
        {% for task in translator.task_set.all %}
        {% fetching_variable_id as variable_id %}
     <div id="myGroup">
    <h2>
          <button class="p-0" type="button" data-toggle="collapse" data-target="#{{variable_id}}" aria-expanded="false" aria-controls="collapseExample">
           {{ task.deadline }}
              {% admin_task_status_display task.id as status%}
              <div style="float:right;" class="ml-auto mr-3 m-1"><small>{{status.0}}</small></div>
          </button>
    </h2>
          <div class="container">
            <div class="collapses m-1" id="{{variable_id}}" data-parent="#myGroup">
            <div class="row">
                {% for task_card in task.cards.all %}
                  <div class="card m-2 ml-2" style="width: 15.5rem;">
                      <div class="card-body" style="text-align:justify;">
                        <h5 class="card-context" style="font-size:0.85rem; font-weight:bold;">{{ task_card.context }}</h5>
                        <p class="card-content" style="font-size:0.85rem;">{{ task_card.content }}</p>
                        <p class="card-cue" style="font-size:0.85rem;">{{ task_card.cue }}</p>
                      </div>
                  </div>
                {% end for %}

            </div>

            <div class="row m-5">

              <div class="col-sm-12 col-md-3">
                <h5>Message</h5>
              </div>

              <div class=" col-sm-12 col-md-5" style="margin-left:1rem;">
                  <p><code style="color:black;">{{ task.message }}</code></p>
              </div>
            </div>

                {% if task.reminder_set.all %}
            <div class="row m-5">

              <div class=" col-md-12 col-sm-12">
                <h5>Reminder</h5>

              </div>
            </div>
                {% for reminder in task.reminder_set.all %}
                    <p>{{ reminder.reminder }}</p>
                {% end for %}
                {% endif %}
            <form method="post">
                {% c s r f _token %}
                <input type="hidden" name="task_id" value="{{ task.id }}">
                <div class="row  m-3">
                <div class="col-md-12 col-sm-12">
                    <div class="form-group">
                        {{ form.reminder }}
                    </div>
                </div>
                </div>
                <div class="row">
                <div class="col">
                    <button type="button">Remind</button>
                </div>

                </div>
            </form>
            </div>
            </div>
          </div>
        {% end for %}