CSS Slider's Tab's Active Class (Bootstrap) doesn't work on second slide

Question

I am using a CSS Slider that utilises two sub tabs in each slide.

The slider's sub tabs use Bootstrap's 'Active' Class on the li that then changes the inactive li's class to active when the inactive tab's navigation arrow (< or >) is clicked.

The sub tabs work correctly on the first slide but do not work on the second slide, or any slide thereafter.

My JS Fiddle

JS Fiddle

The Problematic Code

            <div class="profile-thumbnail"> 
                            
                    <div class="profile-image"> 
                    
                    <div class="overlay-profile"></div>
                    
                    </div>
                    
                    <!-- Sub Tabs -->
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active"><a class="hvr-border-fade" href="#tab1" data-toggle="tab">&lt;</a></li>
                        <li><a class="hvr-border-fade" href="#tab2" data-toggle="tab">&gt;</a></li>
                    </ul>
                                    
                </div>
                <!-- END Player Profile Thumbnail-->

Refer to the below link (the MEET THE TEAM section) for a more accurate idea as the pasted code doesn't seem work as well.

Answer 1

Your tab's href's location need to be unique. Right now you are repeating the same href="tab1", href="tab2" for each slider. You can change it to:

href="tab1-a", href="tab2-a" for gallery 1.

href="tab1-b", href="tab2-b" for gallery 2.

Also, make sure you follow the same process for the id's. I cannot paste full code here due to character limits.

See JsFiddle

<!------------ Sean Peens ------------>
<article>
  <!-- Player Profile Thumbnail-->
  <div class="profile-thumbnail">
    <div class="profile-image">
      <div class="overlay-profile"></div>
    </div>
    <!-- Sub Tabs -->
    <ul class="nav nav-tabs" id="myTab">
      <li class="active">
        <a class="hvr-border-fade" href="#tab1-a" data-toggle="tab">&lt;</a>
      </li>
      <li><a class="hvr-border-fade" href="#tab2-a" data-toggle="tab">&gt;</a>
      </li>
    </ul>
  </div>
  <!-- END Player Profile Thumbnail-->
  <!-- Start Player's Profile -->
  <div class="player-profile">
    <!-- First Tab -->
    <div class="tab-pane fade in active" id="tab1-a">
      <div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
        Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
      </div>
    </div>
    <!-- Second Tab -->
    <div class="tab-pane fade in" id="tab2-a">
      <div class="gun-profile">
        <img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
      </div>
      <div class="gun-profile-text"><span class="gun-title">KWA SR5</span>

        <br>NC STAR Red Dot
        <br>Underslung Grenade Launcher
        <br>Extended Barrel
        <br>Mock Suppressor
      </div>
    </div>
  </div>
  <!-- END Start Player's Profile -->
  <!-- Start Player's Title -->
  <div class="player-details">
    <h3>Sean Peens</h3>

    <ul>
      <li><span class="aka">AKA 'SNOWMAN'</span>

        <br>Team Captain
      </li>
    </ul>
  </div>
  <!-- END Start Player's Title -->
</article>
<!------------ END Sean Peens ------------>
<!------------ Richard Bradley ------------>
<article>
  <!-- Player Profile Thumbnail-->
  <div class="profile-thumbnail">
    <div class="profile-image">
      <div class="overlay-profile"></div>
      <!-- Thumb Image -->
      <img src="http://roxyprinsloo.co.za/tst/_include/img/work/thumbs/image-01.jpg">
    </div>
    <!-- Sub Tabs -->
    <ul class="nav nav-tabs" id="myTab">
      <li class="active">
        <a class="hvr-border-fade" href="#tab1-b" data-toggle="tab">&lt;</a>
      </li>
      <li><a class="hvr-border-fade" href="#tab2-b" data-toggle="tab">&gt;</a>
      </li>
    </ul>
  </div>
  <!-- END Player Profile Thumbnail-->
  <!-- Start Player's Profile -->
  <div class="player-profile">
    <!-- First Tab -->
    <div class="tab-pane fade in active" id="tab1-b">
      <div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
        Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
      </div>
    </div>
    <!-- Second Tab -->
    <div class="tab-pane fade in" id="tab2-b">
      <div class="gun-profile">
        <img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
      </div>
      <div class="gun-profile-text"><span class="gun-title">KWA SR10</span>

        <br>NC STAR Red Dot
        <br>PEQ Box
        <br>Magpul Furniture
        <br>Noveske KX3 Flash Enhancer
      </div>
    </div>
  </div>
  <!-- END Start Player's Profile -->
  <!-- Start Player's Title -->
  <div class="player-details">
    <h3>Richard Bradley</h3>

    <ul>
      <li><span class="aka">AKA 'DEADLEE'</span>

        <br>Team Co-Captain
      </li>
    </ul>
  </div>
  <!-- END Start Player's Title -->
</article>