JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset id="categories-picker">
....
</fieldset>
<fieldset id="product-create-step-2" style="display: none">
....x
</fieldset>
<fieldset id="product-create-step-3" style="display: none">
....xx
</fieldset>
<fieldset 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>« Previous</button>
<button type="button" name="next" id="next-step">Next »</button>
CSS
.show{
display: block;
}
.hide{
display: none;
}
JavaScript
$('#next-step').click(function() {
var current = $("fieldset:visible"),
next = current.next("fieldset");
prev = current.prev("fieldset");
current.hide();
next.show();
next.next("fieldset").length ? $('#next-step').prop("disabled", false) : $('#next-step').prop("disabled", true);
});