JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div>
    <span id='aaa'>Email</span>
    <input type='text' id='bbb'>
</div>
<div>
    <span id='ccc'>Phone</span>
    <input type='text' id='ddd'>
</div>
<div>
    <span>Address</span>
    <input type='text'>
</div>

CSS

div {
    padding: 10px;
    margin: 5px;
    background: #eee;
}
    
span {
    width: 70px;
    display: inline-block;
}

JavaScript

function yyy(z, y, x) {
        $('#' + x).focus(function () {
            $('#' + y).text('Hello');
            foo = $(this).parent('div'); 
            foo.addClass('focused');            
        })
        
        $(foo + '#' + x).focusout(function () {
            $(this).parent().css('background','red');
        })         
        
    }
    
    yyy('Email', 'aaa', 'bbb');
    yyy('Phone', 'ccc', 'ddd');