单击带有每个相关按钮的折叠卡

Question

我正在尝试为数据切换提供唯一的ID，但是它没有显示每个按钮的折叠状态，而是显示了所有打开的卡片。

我试图提供一个唯一的ID（比如说<button data-target=example></button>和<div class = collapses id=example></div>

在这种情况下，单击一个按钮，我将获得所有按钮卡片。

{% for task in translator.task_set.all %}
    {% fetching_variable_id as variable_id %}
    <button 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 "><small>{{status.0}}</small></div>
    </button>

    <div class="collapses" id="{{variable_id}}">
        <div class="row">
            {% for task_card in task.cards.all %}
                <div class="card 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>
                    </div>

            {% end for %}

我希望如果单击特定按钮，则只会显示与该按钮关联的卡片。