Multiple Nested Tabs On 1 Page Won't React To Each Other

So I am attempting to create a menu of sorts with nested tabs, but I’m quite certain I am going about this the wrong way and need help. Below is the code I’ve been using and not getting anywhere with. Right now it is possible to open multiple nested tabs at the same time. I want to only have 1 active nested tab at a time. Any help appreciated!

<div class="grid-container">
        </ul>
      </div>
    </center>

  <div class="tabs-content" data-tabs-content="department-tabs" >
    <div class="tabs-panel" id="sales" style="padding: 1rem 0px !important;">
      <ul class="tabs" data-tabs data-allow-all-closed="true" data-active-collapse="true" data-options="closeOnClick:true; hover: true;"data-deep-link="true" id="dept1-tabs-inner" style="background-color: #ffffff !important;">
        <li class="tabs-title"><a data-tabs-target="dept1-first" href="#dept1-first">dept1 first</a></li>
        <li class="tabs-title"><a data-tabs-target="dept1-second" href="#dept1-second">dept1 second</a></li>
        <li class="tabs-title"><a data-tabs-target="dept1-third" href="#dept1-third">dept1 third</a></li>
        <li class="tabs-title"><a data-tabs-target="dept1-fourth" href="#dept1-fourth">dept1 fourth</a></li>
        <li class="tabs-title"><a data-tabs-target="dept1-fifth" href="#dept1-fifth">dept1 fifth</a></li>
      </ul>
    </div>
    <div class="tabs-panel" id="dept2" style="padding: 1rem 0px !important;">
      <ul class="tabs" data-tabs data-allow-all-closed="true" data-active-collapse="true" data-options="closeOnClick:true; hover: true;" data-deep-link="true" id="dept2-tabs-inner" style="background-color: #ffffff !important;">
        <li class="tabs-title"><a data-tabs-target="dept2-first" href="#dept2-first">dept2 first</a></li>
        <li class="tabs-title"><a data-tabs-target="dept2-second" href="#dept2-second">dept2 second</a></li>
        <li class="tabs-title"><a data-tabs-target="dept2-third" href="#dept2-thrid">dept2 third</a></li>
      </ul>
    </div>
    <div class="tabs-panel" id="dept3" style="padding: 1rem 0px !important;">
      <ul class="tabs" data-tabs data-allow-all-closed="true" data-active-collapse="true" data-options="closeOnClick:true; hover: true;" data-deep-link="true" id="dept3-tabs-inner" style="background-color: #ffffff !important;">
        <li class="tabs-title"><a data-tabs-target="dept3-first" href="#dept3-first">dept3 first</a></li>
        <li class="tabs-title"><a data-tabs-target="dept3-second" href="#dept3-second">dept3 second</a></li>
      </ul>
    </div>
  </div>

  <div class="tabs-content" data-tabs-content="dept1-tabs-inner">
    <div class="tabs-panel" id="dept1-first" aria-hidden="true" data-options="closeOnClick:true; hover: true;">
      {{card}}
    </div>
    <div class="tabs-panel" id="dept1-second" aria-hidden="true" data-options="closeOnClick:true; hover: true;">
      {{card}}
    </div>
    <div class="tabs-panel" id="dept1-third" aria-hidden="true" data-options="closeOnClick:true; hover: true;">
      {{card}}
    </div>
    <div class="tabs-panel" id="dept1-fourth" aria-hidden="true" data-options="closeOnClick:true; hover: true;">
      {{card}}
    </div>
    <div class="tabs-panel" id="dept1-fifth" aria-hidden="true" data-options="closeOnClick:true; hover: true;">
      {{card}}
    </div>
  </div>

  <div class="tabs-content" data-tabs-content="dept2-tabs-inner">
    <div class="tabs-panel" id="dept2-first" aria-hidden="true" data-options="closeOnClick:true; hover: true;">
      {{card}}
    </div>
    <div class="tabs-panel" id="dept2-second" aria-hidden="true" data-options="closeOnClick:true; hover: true;">
      {{card}}
    </div>
    <div class="tabs-panel" id="dept2-third" aria-hidden="true" data-options="closeOnClick:true; hover: true;">
      {{card}}
    </div>
  </div>
</div>

I feel like I may not have been clear in my goals with this request. I have many nested tabs and I need help with defining a selector attribute in JS. Just not familiar with the language. So any help would be appreciated.

Also including a codepen if that helps. https://codepen.io/paulban/pen/gOgVqep