JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div class='top'>    
    <div id='fff' class="aaa">
        <input type='text'>
        <input type='text'>
        <input type='text'>
    </div>
    <div id='fff' class="bbb">
        <input type='text'>
        <input type='text'>
        <input type='text'>
    </div>
</div>
<p class='xxx'></p>
<p class='yyy'></p>
<p class='zzz'></p>

CSS

body {
    margin: 50px;
}

.aaa, .bbb {
    margin: 20px 0;
    background: #eee;
    padding: 20px;
}
.nnn {
    border: 1px solid black;
}

JavaScript

$(function() {
    
    $('*').on('focusout',function(e) {
        e.stopPropagation();
        bar = $(e.target).closest('#fff').attr('class');
    
        $('.' + bar).removeAttr('style');
    
        $('.zzz').text('out - ' + bar);
        
    });

    
    $('*').on('focusin',function(e) {          
        foo = $(e.target).closest('#fff').attr('class');

        
        
        if (foo === bar) { 
            $('.xxx').text('yes');
            
        } else {
            $('.xxx').text(bar);
            $('.' + bar).css('background','red');
        }

        
        $('.yyy').text('in - ' + foo);
        
    });
    
});