Show parent child taxonomy in nested tabs with its post - wordpress

Question

I want to show parent taxonomy in tab section and the under parent taxonomy i want to display child taxonomy in nested tab. On selection of child taxonomy i want to show its post. I am getting every time child taxonomy with with its post which i don't want.
Here is what i want:
TAB1(parent active) TAB2(parent)
ALL_TAB1(child active) SUB1_TAB1 SUB2_TAB1
(posts for all, sub1_tab1, sub2_tab1 and respectively whichever is active)
What i tried
<?php
/*
Template Name: Prac
*/
get_header();
// Get list of 'categories' for tabs -->
$args = array(
'hide_empty' => false,
'parent' => 0
);
$preferences = get_terms( 'preferences', $args );
?>
<div class="row">
<div class="col-md-12">
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile; ?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<!-- Create the tabs -->
<?php
// Use counter so that 'active' class is only applied to first tab
$counter = 0;
foreach ($preferences as $preference) { ?>
<li class="nav-item">
<a class="nav-link <?= ($counter == 0) ? 'active' : '' ?>" id="<?php echo $preference->slug;?>-tab" data-toggle="tab" href="#<?php echo $preference->slug; ?>" role="tab" aria-controls="<?php echo $preference->slug;?>" aria-selected="<?= ($counter == 0) ? 'true' : 'false' ?>"><?php echo $preference->name; ?></a>
</li>
<?php $counter++; } ?>
</ul>
<div class="tab-content" id="nav-tabContent">
<!-- Get the content for each tab -->
<?php
$counter2 = 0;
foreach ($preferences as $preference) { ?>
<div role="tabpanel" class="tab-pane fade <?= ($counter2 == 0) ? 'show active' : '' ?>" id="<?php echo $preference->slug; ?>" aria-labelledby="<?php echo $preference->slug; ?>-tab">
<div class="row">
<?php
$args = array(
'post_type' => 'project',
'tax_query' => array(
array(
'taxonomy' => $preference->taxonomy,
'field' => $preference->slug,
'terms' => $preference->term_id
)
)
);
$loop = new WP_Query( $args );
?>
<div class="col-md-6" id="<?php echo $preference->slug . '-clauses' ?>">
<?php
?>
<?php
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php
//Do something if a specific array value exists within a post
$term_list = wp_get_post_terms($post->ID, $preference->taxonomy, array("fields" => "all"));
?>
<?php foreach($term_list as $term_single) {
$category_children = get_terms(array(
'parent' => $term_single->term_id,
'hide_empty' => false
) );
$category_children_count = count($category_children);
?>
<?php } ?>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<?php echo $term_single->name; ?>
</li>
</ul>
<a class="col-md-6" href="<?php echo the_permalink();?>"><?php the_post_thumbnail();?><?php echo the_title(); ?></a>
<?php endwhile; endif; wp_reset_query(); ?>
</div>
</div> <!-- end row -->
</div> <!-- end tab-pane -->
<?php $counter2++; } ?>
</div> <!-- end tab-content -->
</div> <!-- end col -->
</div> <!-- end row -->
<!-- end content -->
<?php get_footer(); ?>
I am getting like this
TAB1 TAB2
SUB1_TAB1
post
SUB1_TAB1
post
SUB1_TAB2
Can anyone help ? Thanks.