Как дополнить скрипт табов, чтобы третья вложенность вкладок работала верно?
Дано: табы, помещенные друг в друга на JQuery
Необходимо: чтобы каждому родителю под цифрой "2" присваивался свой блок с контентом, а не брался общий к каждому первому родителю "2" во всех колонках
Выполнить код можно тут: кляц<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mama-tab">
<div class='main-links'>
<div class="sppb-nav sppb-nav-tabs tab-head-wrap hh1">
<button id="sppb-content-1572967904513" class="link">1</button>
<button id="sppb-content-1572967904514" class="link">1</button>
<button id="sppb-content-1572967904515" class="link">1</button>
</div>
</div>
<div class="tab">
<div class="mama-tab mama-2">
<div class='main-links'>
<div class="sppb-nav sppb-nav-tabs tab-head-wrap hd-sub">
<div class="model-first-row">
<div class="col-model col-model-01">
<button class="link">2</button>
</div>
<div class="col-model col-model-02">
<button class="link">2</button>
<button class="link">2</button>
</div>
<div class="col-model col-model-03">
<button class="link">2</button>
<button class="link">2</button>
<button class="link">2</button>
</div>
</div>
</div>
</div>
<div class="tab">
<div class='main-links'>
<div class="txt-txt">
Этот контент должен быть только у первой "2" в первой левой колонке, но его захватывает в каждый первый "2" во всех колонках, причем второй и третий "2" в одной колонке (серединная и правая) этот блок не захватывает
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery(document).ready(function($) {
$('.link').on('click', function() {
$(this).siblings('.link').removeClass('active');
$(this).addClass('active');
const index = $(this).parent().children('.link').index($(this));
let linksBlock = $(this).closest('.main-links');
if (linksBlock.length === 0) {
linksBlock = $(this);
}
linksBlock.siblings('.tab').hide();
linksBlock.siblings('.tab').eq(index).show();
});
});
.tab-content {
display: none;
}
.tab-content>.tab>.tab-content {
display: none;
}
.tab {
display: none;
}
.tab-content {
display: none;
}
.model-first-row {
display: flex;
}
.col-model {
display: flex;
flex-direction: column;
}
.link {
margin-right: 13px;
}
.hh1 {
width: max-content;
background: yellow;
margin-bottom: 10px;
}
.model-first-row {
background: orange;
width: max-content;
.txt-txt {
background: wheat;
}