JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset id="categories-picker">
        ....
    </fieldset>

    <fieldset class="step" id="product-create-step-2" style="display: none">
        ....x
    </fieldset>

    <fieldset class="step" id="product-create-step-3" style="display: none">
        ....xx
    </fieldset>

    <fieldset class="step" id="product-create-step-4" style="display: none">
        ....xxx
    </fieldset>

    <fieldset id="product-create-step-5" style="display: none">
        ....xxx
    </fieldset>

    <button type="button" name="finish-wizard" id="finish-wizard" style="display:none">Finish</button>


<button type="button" name="previous" id="previous-step" disabled>&#171; Previous</button>
<button type="button" name="next" id="next-step">Next &#187;</button>

JavaScript

$('fieldset.step').hide().eq(0).show();

$('#next-step').click(function() {

    var current = $('fieldset.step:visible'),
        next = current.next('fieldset.step');
    if (next.length === 0) {
        next = current.nextUntil('fieldset.step').next('fieldset.step');
    }
    current.hide();
    next.show();
    if (next.nextUntil('fieldset.step').next('fieldset.step').add(next.next('fieldset.step')).length === 0) {
        $("#next-step").prop("disabled",true);
    }
    $("#previous-step").prop("disabled",false);
});

$('#previous-step').click(function() {

    var current = $('fieldset.step:visible'),
        prev = current.prev('fieldset.step');
    if (prev.length === 0) {
        prev = current.prevUntil('fieldset.step').prev('fieldset.step');
    }
    current.hide();
    prev.show();
    if (prev.prevUntil('fieldset.step').prev('fieldset.step').add(prev.prev('fieldset.step')).length === 0) {
        $("#previous-step").prop("disabled",true);
    }
    $("#next-step").prop("disabled",false);
});