JSFiddle - React, Tailwind, and code Playground

HTML

<div id = 'picOne' class='fadeinout'>One</div>
<div id = 'picTwo' class='fadeinout'>Two</div>
<div id = 'picThree' class='fadeinout'>3</div>
<div id = 'picFour' class='fadeinout'>4</div>
<div id = 'picFive' class='fadeinout'>5</div>

CSS

div {
    
width:50px;
    height:50px;
    background-color:#f66;
}

JavaScript

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

function beginFades() {
    $('.fadeinout').each( function(i,el) {  // find all elements with fadeinout
        //for each one, trigger the start of the fading after i*5000 milliseconds
        //i is the index of the element as it was found by jQuery - this will be in
        //document order (which actually may not be what you have but I'm guessing        
        //it is)
        setTimeout(function(){
            makeImgFadeInOut($(el))
        }, i*5000);
    });
}

function makeImgFadeInOut(el) {
    //trigger a single fadeIn, fadeOut.
    //But add a callback function to the end of fadeOut which retriggers the whole        
    //thing
    el.fadeIn(1500).delay(3500).fadeOut(1500, function(){makeImgFadeInOut(el);});
}