JSFiddle - React, Tailwind, and code Playground

HTML

Non-Floater
<form class="a">
    <ul class="step step1">
        <li>item1</li>
        <li>item2</li>
        <li>
            <button class="continue">Continue</button>
        </li>
    </ul>
    <ul class="step step2">
        <li>item3</li>
        <li>item4</li>
        <li>
            <button class="back">Back</button>
            <button class="continue">Continue</button>
        </li>
    </ul>
</form>Floater
<form class="floater">
    <ul class="step step1">
        <li>item1</li>
        <li>item2</li>
        <li>
            <button class="continue">Continue</button>
        </li>
    </ul>
    <ul class="step step2">
        <li>item3</li>
        <li>item4</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;
}
.floater ul {
    width: 30%;
    float: left;
}

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;
});