JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hide">
 <div id="lightbox1">
    <!-- Content --> 
 </div>
 <div id="lightbox2">
    <!-- Content --> 
 </div>
      <div id="lightbox3">
    <!-- Content --> 
 </div>
 <div id="lightbox4">
    <!-- Content --> 
 </div>
      <div id="lightbox5">
    <!-- Content --> 
 </div>
 <div id="lightbox6">
    <!-- Content --> 
 </div>
      <div id="lightbox7">
    <!-- Content --> 
 </div>
 <div id="lightbox8">
    <!-- Content --> 
 </div>
      <div id="lightbox9">
    <!-- Content --> 
 </div>
 <div id="lightbox10">
    <!-- Content --> 
 </div>
      <div id="lightbox11">
    <!-- Content --> 
 </div>
 <div id="lightbox12">
    <!-- Content --> 
 </div>
      <div id="lightbox13">
    <!-- Content --> 
 </div>
 <div id="lightbox14">
    <!-- Content --> 
 </div>
      <div id="lightbox15">
    <!-- Content --> 
 </div>
 <!-- etc -->
</div>

CSS

.hide div {
    background-color: black;
    height: 100px;
    width: 100px;
    display: none;
}

JavaScript

$(document).ready( function( ) {
 begin();
}); 

// call this function on page load
function begin( ) { 

    var arr = $(".hide div").toArray();   
    // further elements can be added to arr i.e. last-div 
    showDivs( arr.length, arr );
}   

// begin displaying divs
function showDivs( numberOfDivs, divArray ) {
    var i, lastDiv;

    function nextDiv( ) {

        // depending on number of slides left get random number
        i = randomInt( numberOfDivs ); 
        if( lastDiv ) $(lastDiv).hide();

        $( divArray[ i ] ).fadeIn( 3000 );

        // now that this div has been displayed
        // remove from array
        lastDiv = divArray.splice( i, 1 );

        numberOfDivs--;

        // no more divs to display
        if( numberOfDivs == 0 ) { return };

        setTimeout( nextDiv, 4000);
    }

    setTimeout( nextDiv, 1000);

}

// calculate next random index
function randomInt( divsLeft ) {
   var i = Math.random() * divsLeft;
   return Math.round( i );
}