Next button in tabbed box

Question

I have a tabbed box that I am trying to build a "next" button for to move through each tab. It works except for the active state on the tab buttons do not change when hitting "next". The first tab stays highlighted no matter what tab I'm on. Please see a sample here: http://codepen.io/EBM84/pen/VmjPRQ

Any help is appreciated. Thank you!

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab active">
      <h4>Tab 1</h4>
      <ul class="tab-links">
        <li class="active">
          <a href="#tab2" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab2" class="tab">
      <h4>Tab 2</h4>
      <ul class="tab-links">
        <li>
          <a href="#tab3" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab3" class="tab">
      <h4>Tab 3</h4>
      <ul class="tab-links">
        <li>
          <a href="#tab4" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab4" class="tab">
      <h4>Tab 4</h4>
    </div>

  </div>
</div>  

Answer 1

To expand on Luke Beckers code - you could remove active classes before:

 $('.tab-links li').removeClass('active');
 $('.tab-links a[href="'+ currentAttrValue +'"]').parent('li').addClass('active');

Hope this helps.