Problems with tabs bootstrap how to solve?

Question

DLE

I want to implement under the category of tabs on DLE 13
Well, there was a problem such that Option 4 is not displayed,
well, under the category of tabs it works on Option 3, what's wrong?
I also wanted to implement tabs under the category on Option 4 too ...
Here is Js

// Переключение табов
$(function() {
$('ul.tabs_caption').on('click', 'li:not(.active)', function() {
$(this).addClass('active').siblings().removeClass('active').closest('div.tabs').find('div.tabs_content').removeClass('active').eq($(this).index()).addClass('active');
});
});

Here is the output of the tabs

<div class="tabs">
        <ul class="tabs_caption" data-animated="bounceIn" id="nav_btns">
            <li class="active">
                <div class="btn_selection"><span>Вариант 1</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вариант 2</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вариант 3</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вариант 4</span></div>
            </li>
        </ul>
      
      <div class="tabs_content active">
            {custom category="1,2,3" template="shortstory" order="title" sort="desc" limit="100"}
        </div>
        <div class="tabs_content">
            {custom category="3" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
        <div class="tabs_content">   
        <div class="tabs">
        <ul class="tabs_caption" data-animated="bounceIn" id="nav_btns">
            <li class="active">
                <div class="btn_selection"><span>Первая</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вторая</span></div>
            </li>
        </ul>
        
        <div class="tabs_content active">
            {custom category="1,2" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
        <div class="tabs_content">
            {custom category="1" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
    </div>
        </div>
        <div class="tabs_content">
            {custom category="1" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
    </div>

Answer 1

Solved a problem!
In JS, instead of "find" put "children"