Почему не работает Tab в bootstrap 5?

Question

Вадим Очинский @dodgi

Разрабатываю сайты с нуля и заниманиюсь seo ppc

Почему не работает Tab в bootstrap 5?

Есть сайт на бутстрапе, я залил его как шаблон на WP.
Стили я подключил, а информация в табах не отображается, кроме первой
вот код, для лучшего понимания проблемы.
Пытаюсь реализовать следующее: есть файл index.php В нем я сделал открытие документа <?php get_template_part( 'kazpost/kazpostCity'); ?> kazpostCity - в этом документе и сам tab (код ниже)
kazpostCity.php содержит простой скрипт (тестировал его на локалке он работал), а вот на сайте не хочет. помогите понять почему не работают остальные вкладки. Где я допустил ошибку подскажите пожалуйста...
Вот файл index.php

<!DOCTYPE html>
<html lang="en">
<?php get_header(); ?>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Заголовок</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
    <!-- MDB -->
    <link rel="stylesheet" href="css/mdb.min.css" />
    <!-- Custom styles -->
    <link rel="stylesheet" href="css/style.css" />
	<!-- Development version -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
	<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
	<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
	<script>
     tippy('[data-tippy-content]');
    </script>	
	</head>
	<body>
      <!--Main Navigation-->
	<header>
        <?php get_template_part( 'head'); ?>
		</header>
		<body>
	<div class="container-fluid text-center">
</br><h1 class="mb-3 margin h1">тут заголовок</h1>
<p class="mb-3 text-muted">тут описание</p>
<hr class="my-4" />
<h3 class="mb-3 h3"> второй заголовок</h3>
<p class=""> описание2
</p>
</div>
 <!--Main layout-->
    <div class="container">
          <section>
            <?php get_template_part( 'kazpost/kazpostCity'); ?>
          </section>
          <!--Section: Content-->
        </div>
        <!--Grid column-->
<body>
<footer>
<?php get_footer(); ?>
  </footer>

Вот файл kazpostCity.php

<!DOCTYPE html>
<?php get_header(); ?>
<!-- MDB -->
    <link rel="stylesheet" href="css/mdb.min.css" />
    <!-- Custom styles -->
    <link rel="stylesheet" href="css/style.css" />
<!--script type="text/javascript">
    function showTab(tabNumber) {
      var tabIDs = ["tab1", "tab2", "tab3", "tab4", "tab5", "tab6", "tab7", "tab8", "tab9", "tab10", "tab11", "tab12", "tab13", "tab14", "tab15", "tab16", "tab17", "tab18", "tab19", "tab20", "tab21", "tab22", "tab23", "tab24", "tab25", "tab26", "tab27", "tab28", "tab29", "tab30", "tab31", "tab32", "tab33", "tab34", "tab35", "tab36", "tab37"];
      var tabButtonIDs = ["tabButton1", "tabButton2", "tabButton3", "tabButton4", "tabButton5", "tabButton6", "tabButton7", "tabButton8", "tabButton9", "tabButton10", "tabButton11", "tabButton12", "tabButton13", "tabButton14", "tabButton15", "tabButton16", "tabButton17", "tabButton18", "tabButton19", "tabButton20", "tabButton21", "tabButton22", "tabButton23", "tabButton24", "tabButton25", "tabButton26", "tabButton27", "tabButton28", "tabButton29", "tabButton30", "tabButton31", "tabButton32", "tabButton33", "tabButton34", "tabButton35", "tabButton36", "tabButton37"];
      for (var i = 0; i < tabIDs.length; i++) {
        document.getElementById(tabIDs[i]).style.display = (tabNumber == i ? 'block' : 'none');
        document.getElementById(tabButtonIDs[i]).className = (tabNumber == i ? "active" : "");
      }
    }
</script-->
<div class="container-fluid id=tabContainer">
	<ul class="nav nav-pills nav-tabs mb-3 justify-content-center">
        <li><a class="active" id="tabButton1" onclick="showTab(0)" href="javascript:void(0);">Алматы</a></li>
        <li><a id="tabButton2" onclick="showTab(1)" href="javascript:void(0);">Астана</a></li>	
        <li><a id="tabButton3" onclick="showTab(2)" href="javascript:void(0);">Актобе</a></li>	
		<li><a id="tabButton4" onclick="showTab(3)" href="javascript:void(0);">Шымкент</a></li>
		<li><a id="tabButton5" onclick="showTab(4)" href="javascript:void(0);">Атырау</a></li>
		<li><a id="tabButton6" onclick="showTab(5)" href="javascript:void(0);">Актау</a></li>
		<li><a id="tabButton7" onclick="showTab(6)" href="javascript:void(0);">Уральск</a></li>
		<li><a id="tabButton8" onclick="showTab(7)" href="javascript:void(0);">Костанай</a></li>
		<li><a id="tabButton9" onclick="showTab(8)" href="javascript:void(0);">Семей</a></li>
		<li><a id="tabButton10" onclick="showTab(9)" href="javascript:void(0);">Караганда</a></li>
		<li><a id="tabButton11" onclick="showTab(10)" href="javascript:void(0);">Кызылорда</a></li>
		<li><a id="tabButton12" onclick="showTab(11)" href="javascript:void(0);">Талдыкорган</a></li>
		<li><a id="tabButton13" onclick="showTab(12)" href="javascript:void(0);">Павлодар</a></li>
		<li><a id="tabButton14" onclick="showTab(13)" href="javascript:void(0);">Петропавловск</a></li>
		<li><a id="tabButton15" onclick="showTab(14)" href="javascript:void(0);">Кокшетау</a></li>
		<li><a id="tabButton16" onclick="showTab(15)" href="javascript:void(0);">Нур-Султан</a></li>
		<li><a id="tabButton17" onclick="showTab(16)" href="javascript:void(0);">Экибастуз</a></li>
    </ul>
	<div class="tab-content text-center" id="pills-tabContent">
<div class="container-fluid justify-content-center badge bg-light text-black">
<div id="tab1"><?php get_template_part( 'kazpost/almaty'); ?> Алматы</div>
<div id="tab2" style="display:none;"><?php get_template_part( 'kazpost/astana'); ?> Астана</div>
<div id="tab3" style="display:none;"><?php get_template_part( 'kazpost/aktobe'); ?> Актобе</div>
<div id="tab4" style="display:none;"><?php get_template_part( 'kazpost/shymkent'); ?> Шымкент</div>
<div id="tab5" style="display:none;"><?php get_template_part( 'kazpost/atyrau'); ?> Атырау</div>
<div id="tab6" style="display:none;"><?php get_template_part( 'kazpost/aktau'); ?>Актау</div>
<div id="tab7" style="display:none;"><?php get_template_part( 'kazpost/uralsk'); ?> Уральск</div>
<div id="tab8" style="display:none;"><?php get_template_part( 'kazpost/kostanaj'); ?> Костанай</div>
<div id="tab9" style="display:none;"><?php get_template_part( 'kazpost/semej'); ?> Семей</div>
<div id="tab10" style="display:none;"><?php get_template_part( 'kazpost/кaraganda'); ?> Караганда</div>
<div id="tab11" style="display:none;"><?php get_template_part( 'kazpost/kyzylorda'); ?> Кызылорда</div>
<div id="tab12" style="display:none;"><?php get_template_part( 'kazpost/taldykorgan'); ?> Талдыкорган</div>
<div id="tab13" style="display:none;"><?php get_template_part( 'kazpost/pavlodar'); ?> Павлодар</div>
<div id="tab14" style="display:none;"><?php get_template_part( 'kazpost/petropavlovsk'); ?> Петропавловск</div>
<div id="tab15" style="display:none;"><?php get_template_part( 'kazpost/kokshetau'); ?> Кокшетау</div>
<div id="tab16" style="display:none;"><?php get_template_part( 'kazpost/nur-sultan'); ?> Нур-Султан</div>
<div id="tab17" style="display:none;"><?php get_template_part( 'kazpost/jekibastuz'); ?> Экибастуз</div>

А вот к примеру отдельные 2 файла, который я вывожу в нижней части главной страницы как tab вкладка при нажатии на кнопки
файл almaty.php

<!DOCTYPE html>
<?php get_header(); ?>
		<div id="almaty">
		  <div
			data-toggle="pill"
			data-mdb-target="#pills-almaty"
			class="tab-pane in active"
			id="tab1"
			role="tabpanel"
			aria-labelled="tab1"
			aria-selected="false"
		  >
	<div class="container-fluid "> <span>тут какая информация</span>
  </div>
  </div>

(вторая вкладка tab от первой вкладки отсутствием in active) Пробовал также show active -указывать в первой вкладке, но первая вкладка показывается, а остальные нет.
файл аstana.php

<!DOCTYPE html>
<?php get_header(); ?>
<div id="аstana">
		  <div
			data-toggle="pill"
			class="tab-pane fade"
			id="tab2"
			role="tabpanel"
			aria-labelled="tab2"
			aria-selected="false"
		  >
		  <div class="container-fluid ">
   <div class="container-fluid "> <span>тут какая информация</span>
  </div>
  </div>