JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<a href="javascript:void(0)" class="show-page one" data-page="first">
    First</a>
<a href="javascript:void(0)" class="show-page two" data-page="second">
    Second</button>
<a href="javascript:void(0)" class="show-page three" data-page="third">
    Third</a>

<div class="container">
        <div class="page first">
            <div class="row">
                <center>
                    First Page<br />
                    <button class="btnd btnd-default" id="one">Personal Info</button>&nbsp;<br />
				<button class="btnd btnd-default" id="two">Educational Info</button>&nbsp;<br />
				<button class="btnd btnd-default" id="three">Employment Info</button>
                </center>
             </div>
        </div>
        <div class="page second hide">
            <div class="row">
                <center>
                    Second Page <br />
                     <button class="btnd btnd-default" id="one">Personal Info</button>&nbsp;<br />
				<button class="btnd btnd-default" id="two">Educational Info</button>&nbsp;<br />
				<button class="btnd btnd-default" id="three">Employment Info</button>
                </center>
             </div>
        </div>
        <div class="page third hide">
            <div class="row">
                <center>
                    Third Page <br />
                     <button class="btnd btnd-default" id="one">Personal Info</button>&nbsp;<br />
				<button class="btnd btnd-default" id="two">Educational Info</button>&nbsp;<br />
				<button class="btnd btnd-default" id="three">Employment Info</button>
                </center>
             </div>
        </div>
</div>

JavaScript

$(document).ready(function () {
        $('#one').prop('disabled', false);
		$('#two').prop('disabled', true);
		$('#three').prop('disabled', true);

    
    $('.one').click(function(){
		$('#one').prop('disabled', false);
		$('#two').prop('disabled', true);
		$('#three').prop('disabled', true);
	});
    $('.two').click(function(){
		$('#one').prop('disabled', false);
		$('#two').prop('disabled', false);
		$('#three').prop('disabled', true);
	});
    $('.three').click(function(){
		$('#one').prop('disabled', false);
		$('#two').prop('disabled', false);
		$('#three').prop('disabled', false);
	});

var value = 0, progress;

function progressBar() {
    progress = setInterval(function () {
        var $bar = $('.bar');
        if (value >= 100) {
            clearInterval(progress);
            $('.progress').removeClass('active');
            $(".show-page[data-page=Profile]").trigger("click");
        } else {
            value += 10;
            $bar.width(value * 7);
        }
        $bar.text(value + "%");
    }, 800);
};


$(document).ready(function () {
   
    if (typeof (Storage) !== "undefined" && localStorage.getItem('pageToShow')) {
        var pageToShow = localStorage.getItem('pageToShow');
        $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
    };
    $('.show-page').click(function () {
        var pageToShow = $(this).data('page');
        if (pageToShow == "progBar") {
            value = 0;
            $('.bar').width(0);
            $('.progress').addClass('active');
            progressBar();
        } else {
            clearInterval(progress);
        };
        $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
        if (typeof (Storage) !== "undefined") {
            localStorage.setItem('pageToShow', pageToShow);
        };
    });
});
});