JSFiddle - React, Tailwind, and code Playground

HTML

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

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

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

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

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

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

JavaScript

var first = $('fieldset').eq(0).attr('id');
var step = 0;

$('#next-step').click(function() {
    console.log(step);
    var visibleFieldset = $('fieldset:visible');
    $('fieldset:visible')
    if (step >= 1) {
        $("#previous-step").removeAttr("disabled");
    }
    
    var current = $('fieldset').eq(step);
    console.log(current);
    var next = $('fieldset').eq(step+1);
    console.log(next);
    current.hide();
    next.show();
    step++;
});

$('#previous-step').click(function() {
    var current = $('fieldset').eq(step);
    var previous = $('fieldset').eq(step-1);
    current.hide();
    previous.show();
    step--;
});