JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div id="step1">
        <label for="name">Name:</label>
        <input type="text" id="name" required="required" />
        <label for="quest">Quest:</label>
        <input type="text" id="quest" required="required" />
        <label for="color">Favorite Color:</label>
        <input type="text" id="color" required="required" />
    </div>
    <div id="step2" class="hidden">
        <label for="airspeed">Average airspeed of an unladen Swallow:</label>
        <input type="number" id="airspeed" />
        <label for="type">Which kind:</label>
        <select id="type" required="required">
            <option value="">I don't know that</option>
            <option>African</option>
            <option>European</option>
        </select>
    </div>
    <input type="button" id="next" value="Next" />
</form>

CSS

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

JavaScript

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