JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

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

CSS

.message0 {margin: 30px;height: 200px;border: 10px solid green;}
.message1 {margin: 30px;height: 200px;border: 10px solid yellow;}
.message2 {margin: 30px;height: 200px;border: 10px solid pink;}
.message3 {margin: 30px;height: 200px;border: 10px solid blue;}
.message4 {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

var dataAbc = '<div class="message7" tabindex="1">Focus Shifted Here</div>';
setTimeout(function(){  $(dataAbc).prependTo("#sContainer");},3000);


$("div:visible").each(function(){
  console.log($(this).attr('id'));
});

$(document).on("focusin", "div div", function(){
  $(this).css("background", "yellow");
});

$(document).on("focusout", "div div", function(){
  $(this).css("background", "white");
});