在模板中使用带有for循环的Bootstrap Nav选项卡时出现问题

Question

现在，我正在尝试为网站中的每个实习生资料创建一个导航栏。为此，我使用了循环，并尝试动态创建配置文件。主要问题是单击选项卡时，每个选项卡都会打开第一个模型实例。如您所知，只有第一个模型选项卡可以正常工作

我试图更改标签的href属性，但不起作用

 <!--Code part for calling tabs -->

{% for intern in all_interns %}

 ....some part of codes before...

<ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item">
     <a class="nav-link active" style="margin-bottom: 5px" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" >Kişisel Bilgiler</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">İş Bilgileri</a>
     </li>

...some part of codes after...

{% endfor %}
<!--Code part for each tabs -->
                    <div class="col-md-8">
                    <div class="tab-content profile-tab" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                "<div class="row">
                                        <div class="col-md-6">
                                            <label>Kullanıcı Adı</label>
                                        </div>
                                        <div class="col-md-6">
                                            <p>{{ intern.user.username }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Şehir</label>
                                        </div>
                                        <div class="col-md-6">
                                            <p>{{ intern.user.city }}</p>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Üniversite</label>
                                        </div>
                                        <div class="col-md-6">
                                            <p>{{ intern.university }}</p>
                                        </div>
                                    </div>

                                     <div class="row">
                                        <div class="col-md-6">
                                            <label>Cinsiyet</label>
                                        </div>
                                        <div class="col-md-6">
                                            {% if intern.user.gender == "Male" %}
                                                <p>Erkek</p>
                                            {% else %}
                                                <p>Kadın</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Hakkınızda</label>
                                        </div>
                                        <div class="col-md-6">
                                            <p>{{intern.user.bio}}</p>
                                        </div>
                                    </div>

                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">

                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Başlama Tarihi</label>
                                        </div>
                                        <div class="col-md-6">
                                            <p>{{ intern.begin_of_internship }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Bitiş Tarihi</label>
                                        </div>
                                        <div class="col-md-6">
                                            <p>{{ intern.end_of_internship }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Toplam Çalışma Süresi</label>
                                        </div>
                                        <div class="col-md-6">
                                            <p>{{ intern.worked_day_count }} iş günü</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Toplam Proje Sayısı</label>
                                        </div>
                                        <div class="col-md-6">
                                            <p>{{ intern.own_projects }}</p>
                                        </div>
                                    </div>

                            </div>
                        </div>
                    </div>
                </div>