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="tabe" data-step="2">Tab2</a></li>
                       <li class="disabled"><a href="#" data-toggle="tabe" data-step="3">Tab3</a></li>
                       <li class="disabled"><a href="#" data-toggle="tabe" 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();
});