How to populate data on bootstrap nav-tabs in while loop using php

Question

I have nav-tabs inside the list-group and all of them inside while loop , I managed to fetch data from mysql to nav-tabs . the problem is that contents appear on first nav-tabs only and when I shift to the next line of tabs redirects me to first line of tabs instead of showing its own data as I have looped it inside while loop in order to show all independent contents on each line. I have two lines of nav-tabs .

My php bootstrap code:

                <!-- Start List Group -->
           <ul  class="list-group  p-1 col-lg-12 ">

       <?php while($mysql_result = mysql_fetch_array($myslQuery)){ ?>

   <li name="applicant"  class="list-group-item">

 <!-- Left side of profile -->
 <div class="col-lg-3 col-md-3">
  <center>
    <span class="text-left">
    <img src="<?php echo "../".$mysql_result['passport_photofile'];?>" class=" img-lg  rounded-circle">        
  </span></center>

        <div class="table-responsive panel">
         <table class="table">
             <tbody>
             <!-- Decision buttons    -->
                 <tr>
                <td class="text-center">

             <button class="btn btn-success text-white btn-block"><i class="fa fa-check-circle"></i>Admit</button>       

              <button class="btn btn-dark text-white btn-block"><i class="fa fa-times"></i>Reject</button>

                </td>
                 </tr>
                </tbody>
                </table>
                   </div>        
                    </div>
                    <!-- end -->

  <div class="col-lg-9 col-md-9">

       <!-- Nav Tabs headers -->
      <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#PersonalInf" class="text-primary"><i class="fa fa-check"></i> Personal info</a></li>

          <li><a data-toggle="tab" href="#DegreeAndC" class="text-primary"><i class="fa fa-check"></i> Degree & certificate</a></li>

      </ul>
      <!-- end -->

        <div class="tab-content">
        <!-- Presonal info -->
         <div id="PersonalInf" class="tab-pane fade">
            <div class="table-responsive panel">
                 <div class="item">

          <ul class="">
           <li>Fist name: <?php echo  $mysql_result['firstname']; ?>  
           </li> 
           <li>Last name: <?php echo  $mysql_result['lastname']; ?>
           </li>
           <li>Gender: <?php echo  $mysql_result['gender']; ?>
           </li>  

          </ul>
          </div>           
             </div>
              </div>
                <!-- end -->


  <!-- Degree and certificate -->
            <div id="DegreeAndC" class="tab-pane fade">
            <div class="table-responsive panel">

          <div class="item">      
          <ul class="">
           <li>Program: <?php echo  $mysql_result['program']; ?>  
           </li> 
          <li>Academic year: <?php echo  $mysql_result['academic_year']; ?>
           </li>
          </ul>
      </div> 
      </div>
       </div>
      <!-- End -->

                 </div>
              <!-- Tab content -->

            </div>
               </li>
                <?php } ?>

                      </ul> 

Answer 1

You are using duplicated ids so when you click on a link it's focusing the first found. You can use a counter or the record id to make them unique.

$i = 0;

while($mysql_result = mysql_fetch_array($myslQuery)) {
?>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#PersonalInf-<?= $i ?>" class="text-primary"><i class="fa fa-check"></i> Personal info</a></li>
<!-- Rest of your code -->
<div id="PersonalInf-<?= $i ?>" class="tab-pane fade">
<?php
    $i++;
}

However, I don't think you need anchors at all, since in order to be able to click the pane you must have it in the viewport.