JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sContainer">
        <div class="message0" id="l0">Initial Content 111</div>
        <div class="message1" id="l1">Initial Content 222</div>
        <div class="message2" id="l2">Initial Content 333</div>
        <div class="message3" id="l3">Initial Content 444</div>
        <div class="message4" id="l4">Initial Content 555</div>
        <div class="message5" id="l5">Initial Content 666</div>
        <div class="message6" id="l6">Initial Content 777</div>
</div>

CSS

.message0 {display:none;margin: 30px;height: 200px;border: 10px solid green;}
.message1 {margin: 30px;height: 200px;border: 10px solid yellow;}
.message2 {display:none;margin: 30px;height: 200px;border: 10px solid pink;}
.message3 {margin: 30px;height: 200px;border: 10px solid blue;}
.message4 {display:none;margin: 30px;height: 200px;border: 10px solid black;}
.message5 {margin: 30px;height: 200px;border: 10px solid cyan;}
.message6 {margin: 30px;height: 200px;border: 10px solid orange;}
.message7 {margin: 30px;height: 200px;border: 10px solid red;}

JavaScript

$(document).ready(function(){
    var i,classes;
    var divs_num = $('#sContainer div').length;
     for(i = 0 ; i < divs_num; i++){
          Ids= $('#sContainer div:visible').eq(i).attr('id');
         if(typeof Ids !== 'undefined'){
             alert(Ids);
             if(Ids == 'l3' ){
                 $('#'+Ids).css('background','blue');
             }
         }
    }
    $('#sContainer div').on('click',function(){
        $('#sContainer div').css('border','5px solid blue');
        $(this).css('border','5px solid red');
    });
});