Вставьте категорию товаров в гармошку с функцией

Question

Итак, у меня есть аккордеон, в этом аккордеоне у меня есть еще один внутренний аккордеон для всех различных категорий, которые я получаю через некоторое время oop. Но проблема начинается, когда я вставляю продукты в категорию.

Все продукты выплевываются за пределы аккордеона.

Вот так:

У меня есть функция, которая перебирает все категории и создает аккордеон и внутри тела аккордеона категории я вызываю другую функцию, которая дает мне продукты, это выглядит так:

function getCategories () {global $ connection;

$query = mysqli_query($connection, "SELECT * FROM categories");
while($row = mysqli_fetch_array($query)) {
    $categoryTitle = $row['cat_title'];
    $catId = $row['cat_id'];
    $products = accordionCategoryProducts($catId);

    $categories = "<div class='card mb-2'>
                      <div class='card-header mb-0' style='background-color: #fff;''>
                        <h5 class='mb-0'>
                          <div href='#category$catId' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                            <i class='far fa-caret-square-right'></i>$categoryTitle
                          </div>
                          <div class='float-right'>
                          <a href='category.php?id=$catId'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                        </h5> 
                      </div>

                      <div id='category$catId' class='collapse'>
                        <div class='card-body'>
                            <div class='list-group-item'>
                                $products
                            </div>
                        </div>
                      </div>
                    </div>";

    echo $categories;
}

}

function accordionCategoryProducts($id) {
global $connection;

$query = mysqli_query($connection, "SELECT * FROM products WHERE product_category_id='$id'");
$numRows = mysqli_num_rows($query);

if($numRows > 0) {
while($row = mysqli_fetch_array($query)) {
    $products = "<li class='list-group'>
                    <a href='item.php?id=".$row['id']."'><i class='fas fa-caret-right'></i> ".$row['title']."</a>
            </li>";
            echo $products;

   }
}

}

 <div class="col-lg-12">
  <div id="accordion">
    <div class="card">
      <div class="card-header text-white cat_header">
        <h5 class="mb-0">
          <div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
            <i class="fas fa-arrow-circle-down"></i> <?php echo CAT_NAV; ?>
          </div>
        </h5> 
      </div>

      <!-- First collapsed accordion -->
      <div id="collapse1" class="collapse show">
        <div class="card-body">

            <div class="accordion-inner" id="accordion-inner">

                <?php getCategories(); ?>

            </div>


        </div>
      </div>
    </div>




</div>

Но когда я жестко кодирую какой-то html, он идет на свое законное место.

Пример Почему $ products вне аккордеона, но когда я набираю «случайную строку» внутри, что вызывает такое поведение? Может кто-нибудь указать мне правильное направление?

исходный код:

<section id="category_nav" class="py-5 bg-light">



  <div class=container>
    <div class="row" id="cat_list">
      <div class="info-header mb-5 ml-3">
          <h1 class="text-primary pb-3">
            Browse through all Categories!
          </h1>
          <p class="lead pb-3">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore
          </p>
        </div>

          <!-- ACCORDION -->
      <div class="col-lg-12">
        <div id="accordion">
          <div class="card">
            <div class="card-header text-white cat_header">
              <h5 class="mb-0">
                <div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
                  <i class="fas fa-arrow-circle-down"></i> Categories                </div>
              </h5> 
            </div>

            <!-- First collapsed accordion -->
            <div id="collapse1" class="collapse show">
              <div class="card-body">

                  <div class="accordion-inner" id="accordion-inner">

                      <li class='list-group'>
                    <a href='item.php?id=1><i class='fas fa-caret-right'></i> Arkouda</a>
            </li><li class='list-group'>
                    <a href='item.php?id=2><i class='fas fa-caret-right'></i> Yo</a>
            </li><li class='list-group'>
                    <a href='item.php?id=20><i class='fas fa-caret-right'></i> Paroutsia</a>
            </li><li class='list-group'>
                    <a href='item.php?id=21><i class='fas fa-caret-right'></i> Hello</a>
            </li><li class='list-group'>
                    <a href='item.php?id=41><i class='fas fa-caret-right'></i> Title</a>
            </li><div class='card mb-2'>
                          <div class='card-header mb-0' style='background-color: #fff;''>
                            <h5 class='mb-0'>
                              <div href='#category4' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                                <i class='far fa-caret-square-right'></i>Ρούχα
                              </div>
                              <div class='float-right'>
                              <a href='category.php?id=4'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                            </h5> 
                          </div>

                          <div id='category4' class='collapse'>
                            <div class='card-body'>
                                <div class='list-group-item'>

                                </div>
                            </div>
                          </div>
                        </div><li class='list-group'>
                    <a href='item.php?id=9><i class='fas fa-caret-right'></i> Paroutsia</a>
            </li><li class='list-group'>
                    <a href='item.php?id=10><i class='fas fa-caret-right'></i> Hello</a>
            </li><li class='list-group'>
                    <a href='item.php?id=13><i class='fas fa-caret-right'></i> Yo</a>
            </li><li class='list-group'>
                    <a href='item.php?id=30><i class='fas fa-caret-right'></i> asdasd</a>
            </li><li class='list-group'>
                    <a href='item.php?id=31><i class='fas fa-caret-right'></i> asdasd</a>
            </li><li class='list-group'>
                    <a href='item.php?id=32><i class='fas fa-caret-right'></i> asdasd</a>
            </li><li class='list-group'>
                    <a href='item.php?id=33><i class='fas fa-caret-right'></i> asdasd</a>
            </li><li class='list-group'>
                    <a href='item.php?id=34><i class='fas fa-caret-right'></i> asdasd</a>
            </li><li class='list-group'>
                    <a href='item.php?id=35><i class='fas fa-caret-right'></i> asdasd</a>
            </li><li class='list-group'>
                    <a href='item.php?id=36><i class='fas fa-caret-right'></i> asdasd</a>
            </li><li class='list-group'>
                    <a href='item.php?id=37><i class='fas fa-caret-right'></i> asdasd</a>
            </li><li class='list-group'>
                    <a href='item.php?id=38><i class='fas fa-caret-right'></i> asdasd</a>
            </li><div class='card mb-2'>
                          <div class='card-header mb-0' style='background-color: #fff;''>
                            <h5 class='mb-0'>
                              <div href='#category5' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                                <i class='far fa-caret-square-right'></i>Παπούτσια
                              </div>
                              <div class='float-right'>
                              <a href='category.php?id=5'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                            </h5> 
                          </div>

                          <div id='category5' class='collapse'>
                            <div class='card-body'>
                                <div class='list-group-item'>

                                </div>
                            </div>
                          </div>
                        </div><li class='list-group'>
                    <a href='item.php?id=4><i class='fas fa-caret-right'></i> Τέντες</a>
            </li><li class='list-group'>
                    <a href='item.php?id=12><i class='fas fa-caret-right'></i> Arkouda</a>
            </li><li class='list-group'>
                    <a href='item.php?id=23><i class='fas fa-caret-right'></i> Producto</a>
            </li><div class='card mb-2'>
                          <div class='card-header mb-0' style='background-color: #fff;''>
                            <h5 class='mb-0'>
                              <div href='#category6' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                                <i class='far fa-caret-square-right'></i>Γάντια
                              </div>
                              <div class='float-right'>
                              <a href='category.php?id=6'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                            </h5> 
                          </div>

                          <div id='category6' class='collapse'>
                            <div class='card-body'>
                                <div class='list-group-item'>

                                </div>
                            </div>
                          </div>
                        </div><li class='list-group'>
                    <a href='item.php?id=5><i class='fas fa-caret-right'></i> Φιδι</a>
            </li><div class='card mb-2'>
                          <div class='card-header mb-0' style='background-color: #fff;''>
                            <h5 class='mb-0'>
                              <div href='#category9' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                                <i class='far fa-caret-square-right'></i>Επικαλαμίδες
                              </div>
                              <div class='float-right'>
                              <a href='category.php?id=9'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                            </h5> 
                          </div>

                          <div id='category9' class='collapse'>
                            <div class='card-body'>
                                <div class='list-group-item'>

                                </div>
                            </div>
                          </div>
                        </div><li class='list-group'>
                    <a href='item.php?id=11><i class='fas fa-caret-right'></i> Product</a>
            </li><li class='list-group'>
                    <a href='item.php?id=14><i class='fas fa-caret-right'></i> Γάντια</a>
            </li><li class='list-group'>
                    <a href='item.php?id=22><i class='fas fa-caret-right'></i> Product</a>
            </li><div class='card mb-2'>
                          <div class='card-header mb-0' style='background-color: #fff;''>
                            <h5 class='mb-0'>
                              <div href='#category10' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                                <i class='far fa-caret-square-right'></i>Μασελάκι
                              </div>
                              <div class='float-right'>
                              <a href='category.php?id=10'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                            </h5> 
                          </div>

                          <div id='category10' class='collapse'>
                            <div class='card-body'>
                                <div class='list-group-item'>

                                </div>
                            </div>
                          </div>
                        </div><li class='list-group'>
                    <a href='item.php?id=3><i class='fas fa-caret-right'></i> Γάντια</a>
            </li><li class='list-group'>
                    <a href='item.php?id=6><i class='fas fa-caret-right'></i> Καφες</a>
            </li><li class='list-group'>
                    <a href='item.php?id=15><i class='fas fa-caret-right'></i> Τέντες</a>
            </li><li class='list-group'>
                    <a href='item.php?id=17><i class='fas fa-caret-right'></i> Καφες</a>
            </li><div class='card mb-2'>
                          <div class='card-header mb-0' style='background-color: #fff;''>
                            <h5 class='mb-0'>
                              <div href='#category11' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                                <i class='far fa-caret-square-right'></i>Κατηγορια 1
                              </div>
                              <div class='float-right'>
                              <a href='category.php?id=11'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                            </h5> 
                          </div>

                          <div id='category11' class='collapse'>
                            <div class='card-body'>
                                <div class='list-group-item'>

                                </div>
                            </div>
                          </div>
                        </div><li class='list-group'>
                    <a href='item.php?id=7><i class='fas fa-caret-right'></i> Dunno</a>
            </li><li class='list-group'>
                    <a href='item.php?id=16><i class='fas fa-caret-right'></i> Φιδι</a>
            </li><li class='list-group'>
                    <a href='item.php?id=18><i class='fas fa-caret-right'></i> Dunno</a>
            </li><div class='card mb-2'>
                          <div class='card-header mb-0' style='background-color: #fff;''>
                            <h5 class='mb-0'>
                              <div href='#category12' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                                <i class='far fa-caret-square-right'></i>Λάμπες
                              </div>
                              <div class='float-right'>
                              <a href='category.php?id=12'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                            </h5> 
                          </div>

                          <div id='category12' class='collapse'>
                            <div class='card-body'>
                                <div class='list-group-item'>

                                </div>
                            </div>
                          </div>
                        </div><li class='list-group'>
                    <a href='item.php?id=8><i class='fas fa-caret-right'></i> Car</a>
            </li><li class='list-group'>
                    <a href='item.php?id=19><i class='fas fa-caret-right'></i> Car</a>
            </li><div class='card mb-2'>
                          <div class='card-header mb-0' style='background-color: #fff;''>
                            <h5 class='mb-0'>
                              <div href='#category13' data-toggle='collapse' data-parent='#accordion-inner' style='cursor:pointer;' class='d-inline'>
                                <i class='far fa-caret-square-right'></i>Cars
                              </div>
                              <div class='float-right'>
                              <a href='category.php?id=13'><button class='btn btn-sm float-right cat-btn'><i class='fas fa-angle-right'></i> Go to page</button></a></div>
                            </h5> 
                          </div>

                          <div id='category13' class='collapse'>
                            <div class='card-body'>
                                <div class='list-group-item'>

                                </div>
                            </div>
                          </div>
                        </div>
                  </div>


              </div>
            </div>
          </div>



        </div>
      </div>
    </div>
</div>

</section>