"repeat selection improved" never repeats anything

I need to create a navagation drop down, I used to use css menu writer for this.
I have a table jaycms_categories I have attached it. I have a created the two record sets
first:
<?php
$Categories = new WA_MySQLi_RS("Categories",$jay_cms);
$Categories->setQuery("SELECT * FROM jaycms_categories WHERE CategoryParent = 0");
$Categories->execute();
?>
second:
<?php
$Subcategories = new WA_MySQLi_RS("Subcategories",$jay_cms,10);
$Subcategories->setQuery("SELECT * FROM jaycms_categories WHERE CategoryParent = ?");
$Subcategories->bindParam("i", "".($Categories->getColumnVal("CategoryID")) ."", "-1"); //colname
$Subcategories->execute();
?>
So ive attached the page ive wrapped the subcategories recordset in repeat selection improved
and categories and subcategories in repeat region.
I do get this result:

“<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/02.jpg" alt="Shoes"></a>
<h6 class="fs-base mb-2">Bath and Shower</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">soap</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Bath Bombs</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Shampoo Bars</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/02.jpg" alt="Shoes"></a>
<h6 class="fs-base mb-2">Hair</h6>
<ul class="widget-list">
</ul>
</div>
</div> “
So subcategories does not stay in the correct parent category.
Also i need the menu to really look like this:
****** Repeat this div wrap Every 3 record*** <div class="d-flex flex-wrap flex-sm-nowrap"> ****** Repeat this div wrap Every 3 record***

<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/02.jpg" alt="Shoes"></a>
<h6 class="fs-base mb-2">parent category</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/02.jpg" alt="Shoes"></a>
<h6 class="fs-base mb-2">parent category</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/02.jpg" alt="Shoes"></a>
<h6 class="fs-base mb-2">parent category</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">subcategory</a></li>
</ul>
</div>
</div>

****** Repeat this div wrap Every 3 record***</div> ****** Repeat this div wrap Every 3 record***

you can see the example here https://themes.getbootstrap.com/preview/?theme_id=35287
it is the department dropdown on the left.