JSFiddle - React, Tailwind, and code Playground

by _abl

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div id="buttons">
    <button id="one" class="btn btn-primary btn-block">Form1</button>
    <button id="two" class="btn btn-primary btn-block">from2</button>
</div>
<br>
<div id="fone" class="col-sm-2">
    <form role="form">
        <input type="text" class="form-control" placeholder="Input me">
        <input type="submit" class="form-control btn btn-danger">
        <button class="backbtn btn btn-primary">BACK TO BUTTON LIST</button>
    </form>
</div>
<div id="ftwo" class="col-sm-2">
    <form role="form" ">
    <input type="text" class="form-control" placeholder="Input me">
     <input type="submit" class="form-control btn btn-danger ">
    <button class="backbtn btn btn-primary "> BACK TO BUTTON LIST </button>
</form>
</div>

CSS

#fone, #ftwo {
    display: none;
}

JavaScript

var btns = $('#one, #two')
var forms = $("#fone, #ftwo");

$("#one")[0].correspondingForm = $("#fone");
$("#two")[0].correspondingForm = $("#ftwo");

$(btns).click(function(){
    var btn = this;
    $(btns).fadeOut("fast", function(){
        btn.correspondingForm.fadeIn("fast");
    });
});

forms.find(".backbtn").click(function(){
    $(this).fadeOut("fast", function(){
        btns.fadeIn("fast");
    });
});