Как на JS и PHP сделать страницу с переключением активных вкладок

<?php
$kn[0] = 'Home';
$cont[0] = 'Home component';

$kn[1] = 'Posts';
$cont[1] = 'Posts component';

$kn[2] = 'Archive';
$cont[2] = 'Archive component';

$kn[3] = 'ещё Таб1';
$cont[3] = 'my Таб первый';

$kn[4] = 'Таб n-ый';
$cont[4] = 'Количество Табов неограничено';

$taby = new Taby;

?>

    <style>
      .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
      }
      .tab-button:hover {
        background: #e0e0e0;
      }
      .tab-button.active {
        background: #e0e0e0;
      }
      .tab {
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>


<?php $taby->display($kn, $cont)?>


<?php
class taby{
  function display($kn, $kont){
    $kol_kn = count($kn);
    
    for($i=0;$i<$kol_kn;++$i){
      ?>
      <button id="kn<?=$i?>" class="tab-button<?php if($i==0) print ' active';?>"
        onclick="otrTab(<?=$i?>,<?=$kol_kn?>)"><?=$kn[$i]?></button>      
      <?php      
      }
    for($i=0;$i<$kol_kn;++$i){
      ?>
      <div id="tab<?=$i?>" class="tab"<?php if($i!=0) print ' style="display:none"';?>><?=$kont[$i]?></div>
      <?php
      }?>

    
<script>
function otrTab(t, kol_kn){
  if ( typeof (otrTab.activeTab) == 'undefined' ){
    otrTab.activeTab = 0;
  }
  if (t >= 0 && t < kol_kn){
    globalThis['tab'+otrTab.activeTab].style.display = 'none';
    globalThis['kn'+otrTab.activeTab].style.background = '#f0f0f0';
    globalThis['tab'+t].style.display = 'block';
    globalThis['kn'+t].style.background = '#e0e0e0';
    otrTab.activeTab = t;
  }
}
</script>
    
  <?php
    }
  
  }