JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="div1" style="background:purple">1</div>
    <div class="div2" style="background-color:indigo">2</div>
    <div class="div3" style="background-color:blue">3</div>
    <div class="div2" style="background-color:green">4</div>
    <div class="div3" style="background-color:yellow">5</div>
    <div class="div2" style="background-color:orange">4</div>
    <div class="div3" style="background:red">5</div>
</div>

<br/><br/>

<div class="button">Fade Out</div>

CSS

.container {
   width:100%;     
float:left;    
}

div.container div {
    width:100px;
    height:60px;
    margin-right:10px;
    border:1px solid #000;
    text-align:center;
    padding-top:40px;    
    float:left;
}

div.button{
   margin-top:30px;
   padding:10px 20px;
   border:1px solid #000;
   float:left;
    cursor:pointer;
}

JavaScript

$(".button").click(function() {
    $(this).toggleClass('fadeIn')
        if ($(this).hasClass('fadeIn')){
            fadeOut(0)
        }else{
            fadeIn(0)
        }
    
})
        


allDivs = $(".container div").length;
    
var fadeOut = function(i) {
        
    $("div.container div:eq("+i+")").fadeTo('slow', 0, function() {
        if(i <= allDivs ){
           fadeOut(i+1);   
        }
    })
}
            
var fadeIn = function(i) {
    $("div.container div:eq("+i+")").fadeTo('slow', 1, function() {
        if(i <= allDivs ){
           fadeIn(i+1);   
        }
    })
    
}

$('.button').toggle(function() {
    $(this).text('Fade in');
}, function() {
    $(this).text('Fade Out');
});