How to use sub(sub)Categories in Joomla! K2 - php

Question

I'm editing a website, and this site uses data-groups, of which I'm not familiar (enough) with.
The current result is:
• In K2, I have items in categories, subcategories, and sub-subcategories.
• On the page of the items, there is a horizontal lign, showing each subcategory.
• On that page, I added a dropdown menu under one subcategory. In that dropdown, I have a few sub-subcategories. I would like that when I click on that sub-subcategory, it will show the items from that sub-subcategory.
What do I need to do to make this work?
If I need to post more, feel free to ask, and sorry.
I'll try to explain as good as possible:
Category.php
defined('_JEXEC') or die;
?>
<p style="text-align:center;font-weight:bold;font-size:120%;padding:1%;background:#007dbe;color:white;margin:1% 0 0.95% 0;">OUTLET</p>
<!--<img src="https://i.ibb.co/3dk77DK/outlet3.png" style="margin: 0 0 1% 0;">-->
<div class="centered-pills" style="width:98%;margin:0 auto;background:#474747;">
<ul class="nav nav-pills" id="outlet">
<li class="filterTitle">Filter op:</li>
<li class="active" id="pointer">All</li>
<li class="active" id="drop-a-down">Example
<ul class="drop-a-content">
<div class="column-outlet">
<ul><strong>Tools</strong>
<li class="force-css" data-group="Light">Tool 1</li>
<li class="force-css" data-group="Light">Tool 2</li>
<li class="force-css" data-group="Light">Tool 3</li>
</ul>
<ul><strong>Light</strong>
<li class="force-css" data-group="Light">Light 1</li>
<li class="force-css" data-group="Floor">Light 2</li>
<li class="force-css">Light 3</li>
<li class="force-css">Light 4</li>
</ul>
<ul><strong>Tools</strong>
<li class="force-css">Manual tools</li>
<li class="force-css">Electric tools</li>
</ul>
</div>
<div class="column-outlet">
<ul><strong>Other</strong>
<li class="force-css">Other 1</li>
<li class="force-css">Other 2</li>
<li class="force-css">Other 3</li>
</ul>
<ul><strong>Roof</strong>
<li class="force-css">Roof 1</li>
<li class="force-css">Roof 2</li>
<li class="force-css">Roof 3</li>
<li class="force-css">Roof 4</li>
</ul></div>
</ul>
</li>
<li class="active" id="drop-a-down">Animals
<ul class="drop-a-content">
<div class="column-outlet">
<ul><strong>Blocks</strong>
<li class="force-css">Block 1</li>
<li class="force-css">Block 2</li>
<li class="force-css">Block 3</li>
</ul>
<li class="active" data-group="Category-2">Cats</li>
<li class="active" data-group="Category-3">Dogs</li>
<li class="active" data-group="Category-4">Birds</li>
<li class="active" data-group="Category-5">Elephants</li>
<li class="active" data-group="Category-6">Tigers</li>
<li class="active" data-group="Category-7">Lions</li>
<li class="active" data-group="Category-8">Other</li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>"><?php echo $subCategory->name; ?></li>
<?php endforeach; ?>
</ul>
</div>
<div style="text-align:center;margin-top:2%;">
Get your products now!
</div>
<div style="clear:both;"></div>
<div class="inner">
<div class="row" style="margin-top:-5%;">
<?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>
<div class="col-md-12 col-xs-12">
<div class="centered-pills" style="width:98%;margin:0 auto;">
<ul class="nav nav-pills">
<li class="filterTitle">Filter:</li>
<li class="active" data-group="All">Alle</li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<li data-group="<?php echo $subCategory->name; ?>"><?php echo $subCategory->name; ?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php else: ?>
<div class="col-md-12 col-xs-12">
<p class="text-center" style="display:none;">Promotions in: <span class="divider"></span><strong><?php echo $this->category->name; ?></strong> <span class="divider"></span>Show all products</p>
</div>
<?php endif; ?>
<?php if(isset($this->leading) && count($this->leading)): ?>
<ul id="grid">
<?php foreach($this->leading as $key=>$item): ?>
<?php $this->item=$item; echo $this->loadTemplate('item'); ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div style="text-align:center;margin-top:2%;font-style:italic;font-size:75%;">
All products are property of us.
</div>
</div>
<?php if($this->params->get('catDescription')): ?>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="disclaimer">
<?php echo $this->category->description; ?>
</div>
</div>
</div>
<?php endif; ?>
</div>
Jquery
/* initialize shuffle plugin */
var $grid = jQuery('#grid');
$grid.shuffle({
group: 'all',
itemSelector: '.portfolio-item', // the selector for the items in the grid
speed: 500 // Transition/animation speed (milliseconds)
});
/* reshuffle when user clicks a filter item */
jQuery('.nav-pills li').click(function (e) {
e.preventDefault();
// set active class
jQuery('.nav-pills li').removeClass('active');
jQuery(this).addClass('active');
// get group name from clicked item
var groupName = jQuery(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName );
});
});