JSFiddle - React, Tailwind, and code Playground

HTML

<div id="line1">
    <div class="item">
        <div class="itbg">
            <div id="it1">content1</div>
        </div>
    </div>
    <div class="item">
        <div class="itbg">
            <div id="it2">content2</div>
        </div>
    </div>
    <div class="item">
        <div class="itbg">
            <div id="it3">content3</div>
        </div>
    </div>
    <div class="item">
        <div class="itbg">
            <div id="it4">content4</div>
        </div>
    </div>
    <div class="item">
        <div class="itbg">
            <div id="it5">content5</div>
        </div>
    </div>
</div>

CSS

.itbg div {
    border:1px solid grey;
    display: none;
    width:70px;

JavaScript

var max = $('#line1').children().length;
var ctr = 1; 
var i,j,k,t,next;

// items in order (ex. [1,2,3,4,5,6])

var itms=[];
for(i=1;i<=max;i++)
    itms.push(i);  

// now scramble the items randomly (ex. [6,2,3,1,2,4,5])

for(i=0;i<max;i++)
{          
    // choose two items randomly
    j = Math.floor(Math.random() * max);
    k = Math.floor(Math.random() * max);
    // swap
    t = itms[j];                
    itms[j] = itms[k];
    itms[k] = t;
}

// fade in one item at time (following the scrambled list)

fadeIn(0, max, itms);

setTimeout('fadeOut()', 18000);

fadeOut(0, max, itms);

function fadeIn(current, max, itmsList)
{
    $('#it' + itmsList[current]).fadeIn(1000);
    if(current<max)
    {
        setTimeout( function() {fadeIn(current + 1,max,itmsList);}, 1000);//alert(current);
         
    }
}

function fadeOut(current, max, itmsList)
{
    $('#it' + itmsList[current]).fadeOut(8000);
    if(current<max)
    {
        setTimeout( function() {fadeOut(current + 1,max,itmsList);}, 8000);//alert(current);
         
    }
}