Nested Tabs Bootstrap 3, Error : content remains same

Question

I'm using bootstrap-3 with Jquery to making Nested Tabs while I got some codepen stuff there I got what I wanted, but after some modification in a code I got some different Outputs : when I clicked on first (primary) tab and then clicking on related sub-tab I able to see my content, but after I click on next tab with respect to sub-tabs. Its showing both content of older clicked tab and newer clicked tab, instead of only new content.

here is my codepen link : https://codepen.io/guenon/pen/WNwpxVK

here is original codepen link : enter link description here

$('#interest_tabs').on('click', 'a[data-toggle="tab"]', function(e) {
      e.preventDefault();

      var $link = $(this);

      if (!$link.parent().hasClass('active')) {

        //remove active class from other tab-panes
        $('.tab-content:not(.' + $link.attr('href').replace('#','') + ') .tab-pane').removeClass('active');

        // click first submenu tab for active section
        $('a[href="' + $link.attr('href') + '_all"][data-toggle="tab"]').click();

        // activate tab-pane for active section
        $('.tab-content.' + $link.attr('href').replace('#','') + ' .tab-pane:first').addClass('active');
      }

    });

@import "compass/css3";

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="interest-tabs">
    <!--top level tabs-->
<!--   <li><a href="#all" data-toggle="tab">All</a></li> -->
  <li><a href="#class-six-th" data-toggle="tab">Class 6th</a></li>
  <li><a href="#class-seven-th" data-toggle="tab">Class 7th</a></li>
  <li><a href="#class-eight-th" data-toggle="tab">Class 8th</a></li>
  <li><a href="#class-nine-th" data-toggle="tab">Class 9th</a></li>
  <li><a href="#class-ten-th" data-toggle="tab">Class 10th</a></li>
  <li><a href="#class-eleventh" data-toggle="tab">Class 11th</a></li>
  <li><a href="#class-twelth" data-toggle="tab">Class 12th</a></li>
</ul>

<!--top level tab content-->
<div class="tab-content">
  
    <!--Class-6th tab menu-->
    <div id="class-six-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-six-th-tabs">
            <li><a href="#six-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#six-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#six-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-7th tab menu-->
    <div id="class-seven-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-seven-th-tabs">
            <li><a href="#seven-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#seven-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#seven-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-8th tab menu-->
    <div id="class-eight-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-eight-th-tabs">
            <li><a href="#eight-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#eight-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#eight-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-9th tab menu-->
    <div id="class-nine-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-nine-th-tabs">
            <li><a href="#nine-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#nine-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#nine-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-10th tab menu-->
    <div id="class-ten-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-ten-th-tabs">
            <li><a href="#ten-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#ten-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#ten-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
  <!--Class-11th tab menu-->
    <div id="class-eleventh" class="tab-pane">
        <ul class="nav nav-tabs" id="class-eleventh-tabs">
            <li><a href="#eleven-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#eleven-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#eleven-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-12th tab menu-->
    <div id="class-twelth" class="tab-pane">
        <ul class="nav nav-tabs" id="class-twelth-tabs">
            <li><a href="#twelth-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#twelth-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#twelth-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
</div>

    <!--Class-6th tab content-->
    <div class="tab-content">
        <div id="six-icse" class="tab-pane">
            <i>6th ICSE interests go here</i>
        </div>
        <div id="six-cbse" class="tab-pane">
            <i>6th CBSE interests go here</i>
        </div>
        <div id="six-ssc" class="tab-pane">
            <i>6th SSC interests go here</i>
        </div>
        
    </div>

    <!--Class-7th tab content-->
    <div class="tab-content">
        <div id="seven-icse" class="tab-pane">
            <i>7th ICSE interests go here</i>
        </div>
        <div id="seven-cbse" class="tab-pane">
            <i>7th CBSE interests go here</i>
        </div>
        <div id="seven-ssc" class="tab-pane">
            <i>7th SSC interests go here</i>
        </div>
    </div>

    <!--Class-8th tab content-->
    <div class="tab-content">
        <div id="eight-icse" class="tab-pane">
            <i>eightth ICSE interests go here</i>
        </div>
        <div id="eight-cbse" class="tab-pane">
            <i>eightth CBSE interests go here</i>
        </div>
        <div id="eight-ssc" class="tab-pane">
            <i>eightth SSC interests go here</i>
        </div>
    </div>

    <!--Class-9th tab content-->
    <div class="tab-content">
        <div id="nine-icse" class="tab-pane">
            <i>nineth ICSE interests go here</i>
        </div>
        <div id="nine-cbse" class="tab-pane">
            <i>nineth CBSE interests go here</i>
        </div>
        <div id="nine-ssc" class="tab-pane">
            <i>nineth SSC interests go here</i>
        </div>
    </div>

    <!--Class-10th tab content-->
    <div class="tab-content">
        <div id="ten-icse" class="tab-pane">
            <i>tenth ICSE interests go here</i>
       
        </div>
        <div id="ten-cbse" class="tab-pane">
            <i>tenth CBSE interests go here</i>
        </div>
        <div id="ten-ssc" class="tab-pane">
            <i>tenth SSC interests go here</i>
        </div>
    </div>

    <!--Class-11th tab content-->
    <div class="tab-content">
        <div id="eleven-icse" class="tab-pane">
            <i>eleven ICSE interests go here</i>
        </div>
        <div id="eleven-cbse" class="tab-pane">
          <i>eleven CBSE interests go here</i>          
          
        </div>
        <div id="eleven-ssc" class="tab-pane">
            <i>eleven SSC interests go here</i>
        </div>
    </div>

    <!--Class-12th tab content-->
    <div class="tab-content">
        <div id="twelth-icse" class="tab-pane">
            <i>twelth ICSE interests go here</i>
        </div>
        <div id="twelth-cbse" class="tab-pane">
            <i>twelth CBSE interests go here</i>
        </div>
        <div id="twelth-ssc" class="tab-pane">
            <i>twelth SSC interests go here</i>
        </div>
    </div>
</div>  

Answer 1

you just have to change $('#interest_tabs') to $('#interest-tabs')