jQuery. Bootstrap wizard not going to next step

Question

I am using a bootstrap wizard but when you click on the next step, it's not going forward . I am trying to make it go all the way and enable the previous once it reaches the end.

For some reason its not working correctly

my FIDDLE

$(document).ready(function() {

    var navListItems = $('ul.setup-panel li a'),
        allWells = $('.setup-content');

    allWells.hide();

    navListItems.click(function(e)
    {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this).closest('li');

        if (!$item.hasClass('disabled')) {
            navListItems.closest('li').removeClass('active');
            $item.addClass('active');
            allWells.hide();
            $target.show();
        }
    });

    $('ul.setup-panel li.active a').trigger('click');


    $('#activate-step-2').on('click', function(e) {
        $('ul.setup-panel li:eq(1)').removeClass('disabled');
        $('ul.setup-panel li a[href="#step-2"]').trigger('click');
        $(this).remove();
    })    
     $('#activate-step-3').on('click', function(e) {
        $('ul.setup-panel li:eq(1)').removeClass('disabled');
        $('ul.setup-panel li a[href="#step-3"]').trigger('click');
        $(this).remove();
    })  

});

Answer 1

First: you missed the next buttons in your html like:

<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>

If you need to cycle both on the container and setup you can implement this behavior in one of the two container and make the other to follow the first one.

I rearranged your code so that you can cycle in a cyclic way (updated fiddle here).

If, instead, you want to cycle only on the setup you may consider a new event: clickwiz instead of click.

The snippet:

$(document).ready(function() {

    var navListItems = $('ul.setup-panel li a'),
            allWells = $('.setup-content');


    allWells.hide().eq(0).show();
    navListItems.on('click', function(e)
    {
        e.preventDefault();
        var $target = $($(this).attr('href')),
                $item = $(this).closest('li');

        if (!$item.hasClass('disabled')) {
            navListItems.closest('li').removeClass('active').addClass('disabled');
            allWells.hide();
            if ($item.next('li').length == 0) {
            //
            // for cyclic: go back to first ele
            //
                navListItems.eq(0).closest('li').removeClass('disabled').addClass('active');
                allWells.eq(0).show();
            } else {
                $item.next('li').removeClass('disabled').addClass('active');
                $target.next('div').show();
            }
        }
    });
    
    $('[id^="activate-step-"]').on('click', function(e) {
        var href = '#' + $(this).closest('.setup-content').attr('id');
        $('ul.setup-panel li a[href="' + href + '"]').trigger('click');
    })
});

body{ 
    margin-top:20px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
    <div class="row form-group">
        <div class="col-xs-12">
            <ul class="nav nav-pills nav-justified thumbnail setup-panel">
                <li class="active"><a href="#step-1">
                    <h4 class="list-group-item-heading">Step 1</h4>
                    <p class="list-group-item-text">First step description</p>
                </a></li>
                <li class="disabled"><a href="#step-2">
                    <h4 class="list-group-item-heading">Step 2</h4>
                    <p class="list-group-item-text">Second step description</p>
                </a></li>
                <li class="disabled"><a href="#step-3">
                    <h4 class="list-group-item-heading">Step 3</h4>
                    <p class="list-group-item-text">Third step description</p>
                </a></li>
                <li class="disabled"><a href="#step-4">
                    <h4 class="list-group-item-heading">Step 4</h4>
                    <p class="list-group-item-text">Fourth step description</p>
                </a></li>
            </ul>
        </div>
    </div>
    <div class="row setup-content" id="step-1">
        <div class="col-xs-12">
            <div class="col-md-12 well text-center">
                <h1> STEP 1</h1>
                <button id="activate-step-2" class="btn btn-primary btn-lg">Activate Step 2</button>
            </div>
        </div>
    </div>
    <div class="row setup-content" id="step-2">
        <div class="col-xs-12">
            <div class="col-md-12 well text-center">
                <h1 class="text-center"> STEP 2</h1>
                <button id="activate-step-3" class="btn btn-primary btn-lg">Activate Step 3</button>
            </div>
        </div>
    </div>
    <div class="row setup-content" id="step-3">
        <div class="col-xs-12">
            <div class="col-md-12 well text-center">
                <h1 class="text-center"> STEP 3</h1>
                <button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>
            </div>
        </div>
    </div>
    <div class="row setup-content" id="step-4">
        <div class="col-xs-12">
            <div class="col-md-12 well text-center">
                <h1 class="text-center"> STEP 4</h1>
                <button id="activate-step-1" class="btn btn-primary btn-lg">Activate Step 1</button>
            </div>
        </div>
    </div>

</div>