Dynamic bootstrap tabs using php and mysql - php

Question

I have Bootstrap modal tabs and it is works fine without data loop. I am trying to fill tabs using data from db(fetch), but it is not working when i am changing tabs, how can call my required tab data on press to my tab? I know that I have problem with looping or maybe "active"- class of tabs. Here is my code. What is wrong?
<div class="row">
<div class="col">
<div class="row">
<div class="col-sm-4">
<h4 class="mb-4">Ölkələr</h4>
</div>
</div>
<div class="row">
<?php
$conn = connect_to_bd();
mysqli_set_charset($conn,"utf8");
$selectolke = mysqli_query($conn, "Select t.ID as tid,t.text_az as textaz, c.textid as textid, c.olkeflag as olkeflag, c.id as cid, c.country_az as country_az from countries c, text t where t.id = c.textid");
while($selectolkerow = mysqli_fetch_array($selectolke))
{
$textid = $selectolkerow["textid"];
$country_az = $selectolkerow["country_az"];
$olkeflag = $selectolkerow["olkeflag"];
$olkeid = $selectolkerow["cid"];
?>
<div class="col-lg-4">
<div class="tabs tabs-vertical tabs-left tabs-navigation">
<ul class="nav nav-tabs col-sm-3">
<li class="nav-item active">
<a class="nav-link" href="#tabsNavigation<?php echo $textid; ?>" data-toggle="tab"><img src="lib/png/<?php echo $olkeflag; ?>.png"> <?php echo $country_az; ?></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-8">
<div class="tab-pane tab-pane-navigation active" id="tabsNavigation<?php echo $textid; ?>">
<h4><?php echo header_subname_olke_select_az($olkeid); ?></h4>
<p class="notworkingcss" style="color: #fff;font-family:Verdana, sans-serifsans-serif;text-shadow: black 1px 1px 2px;font-size: 1.2em;">
<?php echo text_olke_select_az($textid, $olkeid); ?>
</p>
<div class="row portfolio-list lightbox m-0" data-plugin-options="{'delegate': 'a.lightbox-portfolio', 'type': 'image', 'gallery': {'enabled': true}}">
<div class="col-12 col-sm-6 col-lg-3">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
<span class="thumb-info-wrapper">
<img src="img/products/yerli/1.jpg" class="img-fluid" alt="Et mehsullari">
<span class="thumb-info-action">
<a href="img/products/yerli/1.jpg" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
<span class="thumb-info-wrapper">
<img src="img/products/yerli/2.jpg" class="img-fluid" alt="Et mehsullari">
<span class="thumb-info-action">
<a href="img/products/yerli/2.jpg" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="portfolio-item">
<span class="thumb-info thumb-info-lighten thumb-info-centered-icons">
<span class="thumb-info-wrapper">
<img src="img/products/yerli/3.jpg" class="img-fluid" alt="Et mehsullari">
<span class="thumb-info-action">
<a href="img/products/yerli/3.jpg" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fa fa-search-plus"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>