JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="container">
    <div class="span6">
<div class="row" data-etapa="1">
    <h1>Etapa 1</h1>
    <input type="text"/>
    <input type="text" required>
    <button type="button" class="btn" data-next>Proximo</button>
</div>

<div class="row" data-etapa="2" hidden>
    <h1>Etapa 2</h1> 
    <input type="text"/>
    <input type="text" required>
    <button type="button" class="btn pull-left" data-prev>Anterior</button>
    <button type="button" class="btn pull-right" data-next>Proximo</button>
 </div>
        
<div class="row" data-etapa="3" hidden>
    <h1>Etapa 3</h1> 
    <input type="text"/>
    <input type="text" required>
    <button type="button" class="btn pull-left" data-prev>Anterior</button>
    <button type="button" class="btn pull-right" data-next>Proximo</button>
 </div>
        
<div class="row" data-etapa="4" hidden>
    <h1>Etapa 4</h1> 
    <button type="button" class="btn pull-left" data-prev>Anterior</button>
    
 </div>
 </div>
</div>

JavaScript

$(function(){

function next() {
      
        var ativa = etapas.filter(":not([hidden])");

        if (1 === ativa.length && valid(ativa) === true) {

            var b = ~~(1 + etapas.index(ativa)), b = etapas.eq(b);

            1 === b.length && (ativa.attr("hidden", "true"), b.removeAttr("hidden"));

        }
    }

    function prev() {
        var ativa = etapas.filter(":not([hidden])");
        if (1 === ativa.length) {
            var b = ~~(etapas.index(ativa) - 1), b = etapas.eq(b);
            1 === b.length && (ativa.attr("hidden", "true"), b.removeAttr("hidden"));
        }
    }
    
     function valid(self) {

        var validate = true;

        $("input[required],textarea[required],input.required,textarea.required", self)
                .removeClass('error')
                .filter('[type="email"]')
                .each(function() {
                    var reg = new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/);

                    if ($(this).val() != '' && reg.test($(this).val()) == false) {

                        validate = false;
                        $(this).addClass('error').focus();
                    }
                    
                    reg = undefined;
                })
                .end()
                .each(function() {

                    if ($.trim($(this).val()) == '') {

                        validate = false;
                        $(this).addClass('error').focus();
                    }
                });

        return validate;
    }
    
//Var's
var etapas = $("[data-etapa]");

etapas.on("click", "[data-next]", next),
etapas.on("click", "[data-prev]", prev);
    
});