JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sContainer">
        <div class="message green" id="l0">Initial Content 111</div>
        <div class="message yellow" id="l1">Initial Content 222</div>
        <div class="message pink" id="l2">Initial Content 333</div>
        <div class="message blue" id="l3">Initial Content 444</div>
        <div class="message black" id="l4">Initial Content 555</div>
        <div class="message cyan" id="l5">Initial Content 666</div>
        <div class="message orange" id="l6">Initial Content 777</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CSS

.message {
    margin: 30px;
    height: 200px;
}

.message.green {
    border: 10px solid green;
}

.message.yellow {
    border: 10px solid yellow;
}

.message.pink {
    border: 10px solid pink;
}

.message.blue {
    border: 10px solid blue;
}

.message.black {
    border: 10px solid black;
}

.message.cyan {
    border: 10px solid cyan;
}

.message.orange {
    border: 10px solid orange;
}

.message.red {
    border: 10px solid red;
}

JavaScript

$(document).ready(function(){
    var msg = $("<div class='message7'>Focus Shifted Here</div>");
    
    function showMessage(e) {                
        var focusedElement = $("#" + e.target.id);        
        if (focusedElement.hasClass("message")){
            focusedElement.append(msg);
        }
    }
    
    $("#sContainer").click(showMessage);
});