JSFiddle - React, Tailwind, and code Playground

HTML

<div class="change me">Item 1</div>
<div class="change me">Item 2</div>
<div class="change me">Item 3</div>
<div class="change me">Item 4</div>
<div class="change me">Item 5</div>
<div class="change me">Item 6</div>

CSS

body { 
    font-family: Helvetica, Arial, sans-serif; 
    font-size:20px;
}
div { 
    background-color: #fff; 
    display: block; 
    border-bottom: 1px solid #ccc;
    background-image: url(http://cdn.sstatic.net/Img/mini-hero-bg.png?v=7f269bbbdb22); 
}
.change { 
    background-image: none!important;     
}

JavaScript

var divs = $(".me").toArray();
var divlength = divs.length;
var randomnum,lastnum,randomfirstdiv;

$(document).ready(function(){
    randomnum = Math.floor(Math.random()*(divlength-1));
    randomfirstdiv = divs[randomnum];
    $(randomfirstdiv).removeClass("change");
});

setInterval(function(){
    if(randomfirstdiv){
        $(randomfirstdiv).addClass("change");
        randomfirstdiv = null;
    }
    randomnum = Math.floor(Math.random()*(divlength-1));
    console.log(randomnum);
    var randomdiv = divs[randomnum];
    $(randomdiv).addTemporaryClass("change", 2000);    
}, 2000);

$.fn.extend({     
    addTemporaryClass: function(className, duration) {        
        var elements = this; 
        clearTimeout(doChange);
        var doChange = setTimeout(function() {
            elements.addClass(className);
        }, duration);
        return this.each(function() {
            $(this).removeClass(className);
        });       
    }
});