Bootstrap 4 dynamic nav-pills with php codeigniter not working - php

Question

When I click different product categories,I cannot get the corresponding product items, but only the items of the active category is displayed.
When I click another nav-item the previously displayed items remain unchanged i.e, unable to change the class " show active" in the tab-panes
Code:
<?php
$this->load->view ( 'templates/header' );
?>
<section class="container">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<?php $flag = 0; foreach ( $gallery_category as $gallery_category_data ) {?>
<li class="nav-item">
<a class="nav-link <?php if($flag==0){echo 'active';$flag ++;}?>"
id="pills<?php echo $gallery_category_data['gallery_category_id'];?>"
data-toggle="pill" href="#<?php echo $gallery_category_data['gallery_category_id'];?>"
role="tab" aria-controls="pill<?php echo $gallery_category_data['gallery_category_id'];?>"
aria-selected="<?php if($flag==0){echo 'true';}?>"><?php echo $gallery_category_data['gallery_category_name'];?></a>
</li>
<?php }?>
</ul>
<div class="tab-content" id="pills-tabContent">
<?php $counter=0; foreach ( $gallery_category as $gallery_category_data ) {?>
<div class="tab-pane fade <?php if($counter==0){echo 'show active';}?>" id="<?php echo $gallery_category_data['gallery_category_id'];?>" role="tabpanel" aria-labelledby="pills<?php echo $gallery_category_data['gallery_category_id'];?>">
<h6><?php echo $gallery_category_data['gallery_category_name']; ?></h6>
<div class="row">
<?php foreach ( $gallery_category_data ['gallery_item'] as $gallery_item_data ) {?>
<div class="col-md-3 mb-3">
<figure>
<img src="<?php echo base_url();?>assets/img/products/<?php echo $gallery_item_data['gallery_image']; ?>" class="img-fluid">
<a href="product_details.php">
<figcaption class="text-center">
<h6 class="mt-3">Saree</h6>
<p class="text-muted"><strong>Rs. 799 /-</strong></p>
</figcaption>
</a>
</figure>
</div>
<?php }?>
</div>
</div>
<?php $counter++; }?>
</div>
</section>
<?php
$this->load->view ( 'templates/footer' );
?>
I cannot diagnose the problem in this code, Please help me out from this problem

Answer 1

if you replace:
<?php if($flag==0){echo 'active';$flag ++;}?>
by
<?php if($flag==0){echo 'nav'.$flag;$flag ++;}?>
and delete:
<?php if($counter==0){echo 'show active';}?>
After your script add this
<script>
$(document).ready(function(){
$( ".nav0" ).trigger( "click" );
});
</script>
its good ?

Answer 2

Just match the condition inside a foreach loop:
$cat = $gallery_category_data['gallery_category_name'];
foreach ( $gallery_category_data ['gallery_item'] as $gallery_item_data )
{
if($gallery_item_data['category name in table'] == $cat){
}
}