JSFiddle - React, Tailwind, and code Playground

by AtheistP3ace

HTML

<form method="post">
    <div id="f1" style="display: block;">
        <div class="label">Value 1:</div>
        <input type="text" name="name" />
        <button id="next1" type="button" onclick="checkValue(this)">Next</button>
    </div>
    <div id="f2">
        <div class="label">Value 2:</div>
        <br>
        <input type="text" name="name" />
        <button type="button" onclick="checkValue(this)">Next</button>
            <br>
    </div>
    <div id="f3">
        <div class="label">Value 3:</div>
        <br>
        <input type="text" name="name" />
        <button type="button" onclick="checkValue(this)">Next</button>
            <br>
    </div>
    </div>
</form>

CSS

form > div {
    display: none;
}

JavaScript

function checkValue (button) {
    var input = $(button).siblings('input');
    var value = input.val();
    if (value == '') {
        return false;
    }
    else {
        var div = $(button).closest('div');
        div.fadeOut();
        div.next().fadeIn();
    }
}