JSFiddle - React, Tailwind, and code Playground

HTML

<input type='text' class='a' />
<div class='inst' tag='a'></div>
<input type='text' class='b' />
<div class='inst' tag='b'></div>
<input type='text' class='c' />
<div class='inst' tag='c'></div>

CSS

.inst {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    cursor: pointer;
}

JavaScript

$(function() {
    $('.inst').click(function() {
        alert($(this).attr('tag') + ' clicked');
    });
    
    $('[type=text]').focus(function() {
       show_inst($(this).attr('class'));
    }).blur(function() {
       //hide_inst($(this).attr('class'));
    });
        
    function show_inst(tag) {
        $('div.inst[tag=' + tag + ']').html(tag + ' instructions');
    }
    
    function hide_inst(tag) {
        $('div.inst[tag=' + tag + ']').html('');
    }
});