Многоуровневое меню, как подружить с bootstrap все 3 уровня

Подскажите как исправить ошибку. Многоуровневое меню 3 уровня. Первые 2 уровня открываются нормально. При открытии 3 уровня, всё сворачивается. Использую bootstrap вот эту тему (https://appstack.bootlab.io/dashboard-analytics.ht... multi level Строю меню так

function getCat($link){
    $sql = "SELECT id, parent_id, name,link FROM category WHERE parent_id != -1 ORDER BY sort,id";
    $result = mysqli_query($link,$sql); 
    //Создаем масив где ключ массива является ID меню
    $cat = array();
    while ($row = mysqli_fetch_assoc($result)) { 
        $cat[$row['id']] = $row;
    }
    return $cat;
}
function getTree($dataset) {
    $tree = array();
    foreach ($dataset as $id => &$node) {    
        //Если нет вложений
        if (!$node['parent_id']){
            $tree[$id] = &$node;
        }else{ 
            //Если есть потомки то перебераем массив
            $dataset[$node['parent_id']]['childs'][$id] = &$node;
        }
    }
    return $tree;
}
$cat  = getCat($link); 
//Создаем древовидное меню
$tree = getTree($cat);
//Шаблон для вывода меню в виде дерева
function tplMenu($category){

$menu = '<li class="sidebar-item">
        <a href="#multi'.$category['id'].'" data-toggle="collapse" class="sidebar-link collapsed"> <span class="align-middle">'.$category['name'].'</span></a>';
                if(isset($category['childs'])){
                    $i++;
                    $menu .= '<ul id="multi'.$category['id'].'" class="sidebar-dropdown list-unstyled collapse" data-parent="#sidebar">
                                '. showCat($category['childs']) .'</li>
                             </ul>';
                }
    $menu .= '</li>';
/*** Рекурсивно считываем наш шаблон**/
function showCat($data){
    $string = '';
    foreach($data as $item){
        $string .= tplMenu($item);
    }
    return $string;
}

//Получаем HTML разметку
$cat_menu = showCat($tree);

Возможно здесь неверное наследие родительского элемента. Но я не понимаю, как это исправить

Разметка работающего меню такая

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<nav id="sidebar" class="sidebar">
  <div class="sidebar-content ">
    <ul class="sidebar-nav">
      <li class="sidebar-item">
        <a href="#multi" data-toggle="collapse" class="sidebar-link" aria-expanded="true"> <span class="align-middle">1 уровень</span></a>
        <ul id="multi" class="sidebar-dropdown list-unstyled collapse" data-parent="#sidebar" style="">
          <li class="sidebar-item">
            <a href="#multi-3" data-toggle="collapse" class="sidebar-link collapsed" aria-expanded="false">2 уровень</a>
            <ul id="multi-3" class="sidebar-dropdown list-unstyled collapse" style="">
              <li class="sidebar-item">
                <a class="sidebar-link" href="#">3 уровень</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>