Next and Previous buttons step through Bootstrap Tabs

Question

I'm trying to get some Previous and Next buttons to step through some Bootstrap tab panes.

I've read some articles which appear to get close, but not exactly what I am looking for.

The other examples appear to be looking for the active nav tab, but the next and previous buttons are within a separate tab container and I'm trying to have them independent of them being in a nav container, so that method doesn't really work.

So far I've been using .next() to add the active and show classes to the tab pane, but it seems to add them to all of the tab panes and not just one individually. So, I'm not 100% if I'm going down the right path, or if there's an easier way to accomplish this? It seems like there is and I'm possibly just making it difficult on myself.

Anyways, here's what I have so far...

Codepen Link: https://codepen.io/ultraloveninja/pen/OBjmzy/

HTML:

<div class="container">

    <!-- Nav tabs -->
    <ul id="mytabs" class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#first" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> First tab
          </a>
      </li>
      <li><a href="#second" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Second tab
          </a>
      </li>
      <li>
          <a href="#third" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Third tab
          </a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active in" id="first">
        <h2>First tab</h2>
      </div>
      <div class="tab-pane fade" id="second">
          <h2>Second tab</h2>
      </div>
      <div class="tab-pane fade" id="third">
          <h2>Third tab</h2>
      </div>
    </div>

  <a class="btn prev" href="#">Previous</a>
  <a class="btn next" href="#">Next</a>

</div>

JS:

$(function(){
  $('#mytabs a:first').tab('show');

  $('.next').on("click",function(e){
    var $this = $(this);
    if($(".tab-pane").hasClass("active")) {
      $('.tab-pane').next().addClass('show active');
      $this.prev().removeClass('show active');
      e.preventDefault();
    }
  });  
});

I figure that if I can figure out the next step through part then I could modify the previous one to follow.

Answer 1

Ok after breaking this down about and asking around, I found this:

    $(".next").on("click", function(e) {
    const $active = $(".tab-pane.active");
    const $next = $active.next();

    if ($next.length) {
      $active.removeClass("active show");
      $next.addClass("active show");
    }
    e.preventDefault();
  });

  $(".prev").on("click", function(e) {
    const $active = $(".tab-pane.active");
    const $prev = $active.prev();

    if ($prev.length) {
      $active.removeClass("active show");
      $prev.addClass("active show");
    }
    e.preventDefault();
  });

Biggest thing is that you need to make sure that you have your previous and next buttons outside of the div that holds the tab panes. Otherwise it's going to keep going down the chain.

Here's a very un-refined pen I put together to help illustrate what I am trying to achieve:

https://codepen.io/ultraloveninja/pen/OBjmzy