dynamic tabs inside Bootstrap 5 card - php

Question

hope you're doing good !
I'm working on the interface of my activity report based on an SQL database and illustrated with pies created with a JS library "Charts".
So I want to display the different pies (depending of the year) in one bootstrap card with a nav where clickable years will be displayed. Just like the exemple here https://www.codeply.com/p/t6GGNuV2yb
To display the different nav buttons and the pies I'm using foreach php loops ($dataphp is the dictionnary structure that the js chart library requiers). The "active" class should handle the displaying tabs on nav items click but in my case, it doesn't work. In my code I add the class to the current year and this is the result :
https://i.stack.imgur.com/1YmPf.png
Thanks to everyone proposing a solution.
Here is my code :
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" data-bs-tabs="tabs">
<?php foreach($dataphp as $annee => $value){
echo '<li class="nav-item">
<a class="nav-link '; if($annee==2022) echo 'active'; echo ' " href="#chartdiv'.$annee.'"><strong>'.$annee.'</strong></a>
</li>';
}; ?>
</ul>
</div>
<form class="card-body tab-content graph">
<?php foreach($dataphp as $annee => $value){
echo '<div class="tab-pane '; if($annee==2022) echo 'active'; echo ' graph" id="chartdiv'.$annee.'"></div>';
}; ?>
</form>
</div>