JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1" class="box">1</div>
<div id="box2" class="box">5</div>
<div id="box3" class="box">8</div>
<div id="box4" class="box">12</div>

<button id="button1">Box1 to Box2</button>
<button id="button2">Box2 to Box3</button>
<button id="button3">Box3 to Box4</button>
<button id="button4">Box1 to Box4</button>

CSS

.box {
    width: 200px;
    height: 100px;
}

#box2, #box3, #box4 {
    display: none;
}

#box1 {
    background-color: red;
}

#box2 {
    background-color: green;
}

#box3 {
    background-color: blue;
}

#box4 {
    background-color: grey;
}

JavaScript

var box1 = $('#box1'),
    box2 = $('#box2'),
    box3 = $('#box3'),
    box4 = $('#box4');
var boxes = $('.box');

$('#button1').click(function(){
    fade(box2);
});

$('#button2').click(function(){
    fade(box3);
});

$('#button3').click(function(){
    fade(box4);
});

$('#button4').click(function(){
    fade(box2, function(){
        fade(box3, function(){
            fade(box4);
        });
    });
});

function fade(thisIn, callback){
    boxes.not(thisIn).filter(':visible').fadeOut('30000', function(){
        thisIn.fadeIn('30000', callback);
    });
}