JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div id="step1">
        <label for="name">Name:</label>
        <input type="text" id="name" required="required" />
    </div>
    <div id="step2" class="hidden">
         <label for="quest">Quest:</label>
        <input type="text" id="quest" required="required" />
    </div>
    <div id="step3" class="hidden">
        <label for="color">Favorite Color:</label>
        <input type="text" id="color" required="required" />
    </div>
    <input type="button" id="next" value="Next" />
</form>

CSS

label, input {float: left;}
label {clear: left;}
.hidden {display: none;}

JavaScript

$(document).ready(function () {
    $('#next').click(function (e) {
        var activeStep = $('form div:not(.hidden)'),
            isValid = activeStep.find('input').prop('validity').valid;
        if (isValid) {
            activeStep.toggleClass('hidden');
            activeStep.next().toggleClass('hidden');
        }
        e.preventDefault();
        return false;
    });
});