JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<ul class="step step1">
    <li>item</li>
    <li>item</li>
    <li>
        <button class="continue">Continue</button>
    </li>
</ul>

<ul class="step step2">
    <li>item</li>
    <li>item</li>
    <li>
        <button class="back">Back</button>
        <button class="continue">Continue</button>
    </li>
</ul>
</form>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

JavaScript

$('.step1').siblings('ul').hide(); // hide all except step 1

$('.continue').click(function(){
    $(this).closest('.step').hide("slide",{direction:"left"},1500).parent().next('.step').show("slide",{direction:"right"},1500);
  	return false;
});

$('.back').click(function(){
    $(this).closest('.step').slideUp().prev('.step').slideDown();
    return false;	
});