单击时Bootstrap折叠扩展所有卡片

嗨，我正在尝试对我的 django 应用程序的一部分使用引导程序折叠。

到目前为止，这是我的实现：

{% extends 'base.html' %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="card">

                <h1 class="text-center">Recent reports</h1>

                <div class="accordion" id="accordionExample">

                    {% for report in reports %}

                    <div class="card">

                        <div class="card-header" id="report_{{ loop.counter }}">

                            <h2 class="mb-0">

                                {% if loop.counter == 1 %}

                                <button class="btn btn-link" type="button" data-toggle="collapse"
                                    data-target="#collapse{{ loop.counter }}" aria-expanded="true"
                                    aria-controls="collapse{{ loop.counter }}">

                                    Report #{{ report.report_number }}

                                </button>

                                {% else %}

                                <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                    data-target="#collapse{{ loop.counter }}" aria-expanded="false"
                                    aria-controls="collapse{{ loop.counter }}">

                                    Report #{{ report.report_number }}

                                </button>

                                {% endif %}

                            </h2>

                        </div>

                        <div id="collapse{{ loop.counter }}" class="collapse"
                            aria-labelledby="report_{{ loop.counter }}" data-parent="#accordionExample">

                            <div class="card-body">

                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <th scope="row">Date</th>
                                            <td>{{ report.datetime_submitted }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">XYZ</th>
                                            <td>{{ report.xyz }}</td>
                                        </tr>
                                        .....
                                    </tbody>
                                </table>

                            </div>

                        </div>

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

我面临一个问题，当我点击card-header卡片时，所有折叠card-body类元素都展开，而不仅仅是相关的元素（这是所需的行为）。

任何有关如何解决此问题的指导将不胜感激。