JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div id="questions">
        <div class="question" data-title="Section 1" data-q="And my question is? 1">
            <div class="answerWrapper">
                <div class="answer">
                    <p><input style="width: 20px;" type="checkbox" name="CheckboxGroup[1]" value="1" /></p>
                </div>
            </div>
        </div>
    
        <div class="question" data-title="Section 2" data-q="And my question is? 2">
            <div class="answerWrapper">
                <div class="answer">
                    <p><input style="width: 20px;" type="checkbox" name="CheckboxGroup[2]" value="2" /></p>
                </div>
            </div>
        </div>
        
        <div class="question" data-title="Section n" data-q="And my question is? n">
            <div class="answerWrapper">
                <div class="answer">
                    <p><input style="width: 20px;" type="checkbox" name="CheckboxGroup[n]" value="n" /></p>
                </div>
            </div>
        </div>

        <div class="question" data-title="Section Last" data-q="This is where it ends...">
            <div class="answerWrapper">
                <div class="answer">
                    <p class="a"><input style="width: 20px;" type="checkbox" name="CheckboxGroup[n]" value="n" /></p>
                </div>
            </div>
        </div>
    </div>
</form>


<!-- **************** -->
<div id="liveQuestion">
    <h2>***</h2>
    <div class="questionInner">
        <div class="question"></div>
        <div class="answerWrapper"></div>
        <div class="controls">
            <button class="prev">Prev</button>
            <button class="next">Next</button>
            <button class="submit">Submit</button>
        </div>
    </div>
</div>

CSS

#questions {
    display: none;
}

JavaScript

var q = -1;
var $questions = $("#questions .question");
var $liveQuestion = $("#liveQuestion");
var $prevButton = $liveQuestion.find(".prev");
var $nextButton = $liveQuestion.find(".next");
var $submitButton = $liveQuestion.find(".submit");
var qMax = $questions.length-1;

function getQuestion(n) {
    var $question = $questions.eq(n);

    //shuffle last answer back into q
    if(q >= 0) {
        $liveQuestion.find(".answer").appendTo($questions.eq(q).find(".answerWrapper"));
    }
    
    //shuffle question n into livQuestion
    $liveQuestion.find("h2").text($question.data('title'));
    $liveQuestion.find(".question").text($question.data('q'));
    $question.find(".answer").appendTo($liveQuestion.find(".answerWrapper"));

    //manage prev/next/submit
    //next - show unless last
    $nextButton.attr('disabled', n >= qMax);
    //prev - show unless first
    $prevButton.attr('disabled', n <= 0);
    //submit - show only for last
    $submitButton.attr('disabled', n < qMax);

    q = n;
}
//attach handlers to prev/next/submit
$nextButton.on('click', function(){
    var n = Math.min(q+1, qMax);
    getQuestion(n);
});
$prevButton.on('click', function(){
    var n = Math.max(q-1, 0);
    getQuestion(n);
});
$submitButton.on('click', function() {
    $liveQuestion.find(".answer").appendTo($questions.eq(q).find(".answerWrapper"));
});

getQuestion(0);