How to insert active class in tabs dynamically (like in bootstrap tabs)

[synerdb]

im trying to display data from database in tabs form.
Page title in tab title and when user click on tab title it display its corresponding content in tab-content

<!-- tab-title -->
<ul class="page-title">
    <?php
        //getting parent page title from database
        //Query by id

        //defining $i for data-bs-target for id target in tab-content
        $i = 1; 
        //fetching data with while loop and getting primary key (id)
        $parent_id = $rows->id;
    ?>
    <li class="dropdown">
        <!-- data-bs-target to link tab title with tab-conten id -->
        <a class="menu-link main-link" data-bs-target="<?php echo $i; ?>">
            <!-- display parent-title  -->
            <?php echo $rows->page_title;?>
        </a>
        
        <!-- displaying child page title -->
        <ul class="sub-menu list-unstyled px-3 py-2">
            <?php
                //displaying child page title only foreign key in child table match with id from parent table
                //query where child page foreign id match with parent page primary key
                //fetching data with while loop
            ?>      
            <li class="menu-item">
                <!-- data-bs-target to link tab title with tab-conten id -->
                <a  class="menu-link" data-bs-target="<?php echo $i; ?>">
                    //displaying child title in match of foreign key with primay key of parent page
                    <?php echo $child_rows->child_title;?>
                </a>
            </li>
            <!-- while loop for child page ends -->
        </ul>
    </li>
    <!-- while loop ends for parent page     -->
</ul>

Tab-content

<!-- tab-content -->
<div class="content-wrap py-0">
    <?php
        $child_data = $conn->prepare("SELECT * FROM children_page WHERE parent_id = :parent");
        $child_data->bindParam(':parent', $parent_id);

        //parent table
        $data = $conn->query("SELECT * FROM parent_page ORDER BY id DESC");
        $p=1;
        while($rows = $data->fetch(PDO::FETCH_OBJ) ):
            $parent_id = $rows->id;
    ?>
       <!--active class should added to page-section -->
        <div  class="page-section" id="<?php echo $p; ?>">
            <?php 
                //chlidren table
                $child_data->execute();
                if ($child_data->rowCount()) {
                    // parent has children
                    while($child_rows = $child_data->fetch(PDO::FETCH_OBJ) ): 
                    echo $child_rows->child_content;
            ?>

            <?php endwhile;
                }else{
                    echo $rows->page_content;
                }
            ?>
        </div>
    <?php $p++; endwhile;?>
</div>

Now Js for tab-title and Tab-content to interlink and work on click

$(".menu-link").on("click",function(){
        var dataValue= $(this).attr("data-bs-target");
        var dataValueArr = dataValue.split("#");
        var dataValuePosition= dataValueArr[1];
        
        $(".page-section").removeClass("active")
        
        $('.page-section').each(function() {
            aa = this.id;
            if(aa.match(dataValuePosition)){        
            if($i==0){          
                $(`#${dataValuePosition}`).addClass("active")
                }
                var headerHeight = $(".onzlogo").height();
                var sliderHeight = $(".slider-element").height()
                var totalHeight = headerHeight+sliderHeight;
                window.scrollTo({
                        top: totalHeight,
                        left: 0,
                        behavior: 'smooth'
                });
            }
          })
    })

menu-link is tab-title and page-section is tab-content when user click on menu-link (tab-title) active class should be add to page-section(tab-content)

Above js code work fine with static code but with mysqli code im unable to insert active class.

how can i insert active class dynamically in loop to selected page-section(tab-content) only.

[synerdb]

It adding active class on click working fine on click but i want by deafult i want to active class on first child.

$(".menu-link").on("click",function(){
	var dataValue= $(this).attr("data-bs-target");
	
	$('.page-section').each(function() {
		aa = this.id;
		//console.log(this.id);
		if(aa.match(dataValue)){	
		    //$(`#${dataValuePosition}`).removeClass("active")	
		    $(".page-section.active").removeClass("active")
			$(`#${dataValue}`).addClass("active")
		}
	  })
})

[synerdb]

solved adding active class on first child as well as on click add/remove active class