JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<br />
<button id="btn">Start</button>
{{test}}

CSS

#box1,#box2,#box3,#box4{position:fixed;top:12px;left:12px;display:block;height:88px;width:88px;}
#box1{background-color:red;}
#box2{background-color:yellow;}
#box3{background-color:green;}
#box4{background-color:blue;}
#box2,#box3,#box4{display:none;}
#btn{position:fixed;top:110px;left:32px;}

JavaScript

$('#btn').click(function(){
    $scope.test="fish"
        $('#box1').fadeOut('slow', function() {
            $('#box2').fadeIn('slow', function() {
                $('#box2').fadeOut('slow', function() {
                    $('#box3').fadeIn('slow', function() {
                        $('#box3').fadeOut('slow', function() {
                            $('#box4').fadeIn('slow', function() {
                                $('#box4').fadeOut('slow');
                            });
                        });
                    });
                });
            });
        });
    });