Django项目点击项目卡片弹出Bootstrap Modal数据不更新问题

页面所有项目卡片绑定的模态框都使用了重复的固定ID maritime-software-modal，HTML标准要求页面元素ID全局唯一，Bootstrap触发模态框时默认只会匹配到页面中第一个对应ID的模态框节点，因此无论点击哪个卡片，弹出的永远是第一条项目的数据。

• 给循环生成的每个模态框分配唯一ID，用项目的主键ID或者循环序号做后缀区分即可
• 修改卡片触发链接的data-bs-target属性，指向当前项目对应的唯一模态框ID，保证触发关系一一对应

<div class="container software-showcase-trio">
    <div class="row">
        {% for maritime_content in maritime_project_content %}
        <div class="col-lg-3 col-md-3 col-sm-6">
            <!-- 触发链接的target绑定当前项目专属模态框ID -->
            <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#maritime-software-modal-{{ maritime_content.id }}">
                <div class="software-block-trio" style="background-image:url({{media_url}}{{maritime_content.cover_image}});">
                    <div class="software-block-hover-trio">
                        <h1>{{maritime_content.title}}</h1>
                    </div>
                </div>
            </a>
            <!-- Modal 用项目ID做后缀保证ID唯一 -->
            <div class="modal fade" id="maritime-software-modal-{{ maritime_content.id }}" tabindex="-1" aria-labelledby="modal-label-{{ maritime_content.id }}" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-title" id="modal-label-{{ maritime_content.id }}"></h6>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body maritime-software-modal-body">
                            <div class="maritime-modal-title">
                                <h1 class="fw-bold display-5">{{maritime_content.title}}</h1>
                            </div>
                            <img src="{{media_url}}{{maritime_content.cover_image}}" height="500" width="1000" alt="">
                            <div class="maritime-fields-title">
                                <div class="maritime-project-details">
                                    <h3 class="fw-bold">Project Details</h3>
                                    <p class="">{{maritime_content.project_details}}</p>
                                </div>
                                <div class="maritime-problem-details">
                                    <h3 class="fw-bold">Problem</h3>
                                    <p>{{maritime_content.problem_details}}</p>
                                </div>
                                <div class="maritime-solution-details">
                                    <h3 class="fw-bold">Solution</h3>
                                    <p>{{maritime_content.solution_details}}</p>
                                </div>
                                <div class="maritime-technology-list">
                                    <h3 class="fw-bold">Technologies</h3>
                                    <p>{{maritime_content.technology_list}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- modal -->
        </div>
        {% endfor %}
    </div>
</div>

提示：如果你的maritime_content模型没有配置可用主键，也可以用{{ forloop.counter }}代替{{ maritime_content.id }}生成唯一后缀，效果完全一致。

内容的提问来源于stack exchange，提问作者Russel