Bootstrap tabs - Next & previous Buttons

Question

I am using Bootstrap 3.4.

I am using tab-pills on a form with 3 tabs.

I am trying to place next & previous buttons to aid navigation between the tab form.

I have read this post on the topic (and the bootply ), which is exactly what I require, and I applied the necessary code.

On my form, in all 3 tabs, I always see the next1 button, I never see the other buttons.

I finally figured out that the error is to do with the class=active on the <li class="active"> line of code> (or at least I am almost certain this is the error).

I have searched Google and SO to figure out how to get the js code working, but I cannot figure out to correct this simple issue. I have exhausted all my attempts, so I turn to SO for assistance.

Can anyone suggest how I might correct this?

Here is my js code:

$('.btnNext').click(function(){
    $('.nav-pills > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function(){
    $('.nav-pills > .active').prev('li').find('a').trigger('click');
});

Here is my HTML code:

<ul class="nav nav-pills">
    <li class="active">
        <a data-toggle="tab" id="id_link_tab1" href="#tab1">
            <i class="fa fa-check-square-o icon_size26"></i>
            &nbsp;Tab #1
        </a>
    </li>
    <li class="">
        <a data-toggle="tab" id="id_link_tab2" href="#tab2">
            <i class="fa fa-file-text icon_size26"></i>
            &nbsp;Tab #2
        </a>
    </li>
    <li class="">
        <a data-toggle="tab" id="id_link_tab3" href="#tab3">
            <i class="fa fa-pencil-square-o icon_size26"></i>   
            &nbsp;Tab #3
        </a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext">Next1</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext">Next2</a>
        <a class="btn btn-primary btnPrevious">Previous3</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious">Previous4</a>
    </div>
</div>

Answer 1

    <!--Nav tabs-->
    <div class="tabs-wrapper">
        <ul class="nav classic-tabs tabs-3" role="tablist">
            <li class="nav-item nav-item-panel-1">
                <a class="nav-link waves-light active" data-toggle="tab" href="#panel-1" aria-controls="panel-1" role="tab">First Tab</a>
            </li>
            <li class="nav-item nav-item-panel-2">
                <a class="nav-link waves-light" data-toggle="tab" href="#panel-2" aria-controls="panel-2" role="tab">Second Tab</a>
            </li>
            <li class="nav-item nav-item-panel-3">
                <a class="nav-link waves-light" data-toggle="tab" href="#panel-3" aria-controls="panel-3" role="tab">Third Tab</a>
            </li>
        </ul>
    </div>

    <!--Tab panels-->
    <div class="tab-content">
        <!--Panel 1-->
        <div class="tab-pane fade in show active" id="panel-1" role="tabpanel">
            Test1
        </div>
        <!--Panel 2-->
        <div class="tab-pane fade in" id="panel-2" role="tabpanel">
            Test2
        </div>
        <!--Panel 3-->
        <div class="tab-pane fade in" id="panel-3" role="tabpanel">
            Test3
        </div>
        <div class="btn-group">
            <button class="btn" id="prevtab" type="button" data-toggle="tab">Prev</button>
            <button class="btn" id="nexttab" type="button" data-toggle="tab">Next</button>
        </div>
    </div>


  $(document).ready(function () {
        let tabs = $('.tabs-wrapper li');
        $('#prevtab').on('click', function () {
            console.log( tabs.find('.active').parent())
            tabs.find('.active').parent().prev('li').find('a[data-toggle="tab"]').tab('show');
        });
        $('#nexttab').on('click', function () {
            tabs.find('.active').parent().next('li').find('a[data-toggle="tab"]').tab('show');
        });
    })