How to make Bootstrap Tab dynamic PHP? - php

Question

I have a problem for making TAB dynamically. When I click Tab 2 (when class="tab-pane fade"), a tab content was duplicated from Tab 1 and so do to another tab.This is a screenshot
And this is my php code :
$sql1 = "SELECT * FROM pur_supp WHERE pn = '$id_p' and pn_interchange = '$id_a'";
$hasil1= mysqli_query($connect2,$sql1);
//$rowp = mysqli_fetch_assoc($hasil1);
$tab_menu = '';
$tab_content = '';
$i = 0;
while($row1 = mysqli_fetch_array($hasil1))
{
if($i == 0)
{
$tab_menu .= '
<li class="active">Priority '.$row1["priority"].'</li>
';
$tab_content .= '
<div id="priority'.$row1["priority"].'" class="tab-pane fade in active">
';
}
else
{
$tab_menu .= '
<li>Priority '.$row1["priority"].'</li>
';
$tab_content .= '
<div id="priority'.$row1["priority"].'" class="tab-pane fade">
';
}
$sql2 = "SELECT * FROM pur_supp WHERE pn = '$id_p' and pn_interchange = '$id_a' and priority = '".$row1["priority"]."' GROUP BY pn,pn_interchange";
$hasil2= mysqli_query($connect2,$sql2);
while($rowp = mysqli_fetch_array($hasil2))
{
$tab_content .= '<div class="panel-heading" align="center">';
$tab_content .= '<h2 >Selected Vendor Information</h2>';
$tab_content .= '<div class="panel-heading" align="center">';
$tab_content .= '<h5 >PURCHASE SUPPLIER</h5>';
$tab_content .= '<p style="font-weight: bold">Part Number';
$tab_content .= '<input style="text-align:center;margin-left: 90px" class="form-control" type="text" name="pn1" value="'. $rowp['pn'].'" readonly> </p>';
$tab_content .= ' <p style="font-weight: bold; text-align: left">Selected Vendor Information : Priority '.$rowp['priority'].'</p>';
}
$i++;
}