JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm" action="yourpage.something">
    <div class="group">
        <label for="value1">Value 1</label>
        <input type="text" id="value1" name="value1" />
    </div>
    <div class="group">
        <label for="value2">Value 2</label>
        <input type="text" id="value2" name="value2" />
    </div>
    <div class="group">
        <label for="value3">Value 3</label>
        <input type="text" id="value3" name="value3" />
    </div>
    <div class="group">
        <label for="value4">Value 4</label>
        <input type="text" id="value4" name="value4" />
    </div>
    <div class="group">
        <label for="value5">Value 5</label>
        <input type="text" id="value5" name="value5" />
    </div>
    <div class="group">
        <label for="value6">Value 6</label>
        <input type="text" id="value6" name="value6" />
    </div>
    <div class="group">
        <label for="value7">Value 7 (last one)</label>
        <input type="text" id="value7" name="value7" />
    </div>
    <div>
        <button id="btnNext" type="submit">Next</button>
    </div>
</form>

JavaScript

var q = 1,
    qMax = 0;

$(function () {
    qMax = $('#myForm div.group').length;
    $('#myForm div.group').hide();
    $('#myForm div.group:nth-child(1)').show();
    $('#btnNext').on('click', function (event) {
        event.preventDefault();
        handleClick();
    });
});

function handleClick() {
    if (q < qMax) {
        $('#myForm div.group:nth-child(' + q + ')').slideUp();
        $('#myForm div.group:nth-child(' + (q + 1) + ')').fadeIn(500);
        if (q == (qMax - 1)) {
            $('#btnNext').html('Submit Answers');
        }
        q++;
    } else {
        alert('Submitting'); // Add code to submit your form
    }
}