JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <div id="page-wrapper">

        <div class="container-fluid" id="eventWizard">
            <!-- Page Heading -->
            <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" style="width: 25%;">
                    25%
                </div>
            </div>

            <div class="navbar">
                <div class="navbar-inner">
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Tab1</a></li>
                        <li class="disabled"><a href="#" data-toggle="tab" data-step="2">Tab2</a></li>
                        <li class="disabled"><a href="#" data-toggle="tab" data-step="3">Tab3</a></li>
                        <li class="disabled"><a href="#" data-toggle="tab" data-step="4">Tab4</a></li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane fade in active" id="step1">
                 
                    <div class="col-lg-6 col-lg-offset-3"> 
                        <div class="row">
                            <nav>
                                <ul class="pager">
                                    <li id="to-tab-2"><a href="#">To Tab 2 <span aria-hidden="true">&rarr;</span></a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="step2">
                 
                    <div class="col-lg-6 col-lg-offset-3"> 

                    </div>
                </div>
            </div>
        </div>
</div>

JavaScript

$('.next').click(function () {
    var nextId = $(this).parents('.tab-pane').next().attr("id");
    $('[href=#' + nextId + ']').tab('show');
    return false;
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    console.log("here");
    //update progress
    var step = $(e.target).data('step');
    var percent = (parseInt(step) / 4) * 100;

    $('.progress-bar').css({
        width: percent + '%'
    });
    $('.progress-bar').text(percent + '%');

    //e.relatedTarget // previous tab

})
$('#page-wrapper').on('click', '#to-tab-2', function (e) {
    e.preventDefault();
    //some validation here using if-else.
    $('ul.nav-pills li a[data-step="2"]').attr({
        "href": "#step2",
            "data-toggle": "tab"
    });
    $('a[href="#step2"]').parent().removeClass('disabled')
    $('a[href="#step2"]').click();

});