JSFiddle - React, Tailwind, and code Playground

HTML

<div class="editor">
    <input type="text"/>
    <input type="text"/>
</div>
<div class="editor">
    <input type="text"/>
    <input type="text"/>
</div>
<button>GO</button>

CSS

div.editor {
    margin:5px;
    padding: 5px;
    border: 1px solid black;
}
div.loading {
    background: red;
}
div.focused {
    background: green;
}

JavaScript

/*this expresses what I want to do
$(".editor")
.blur(function(){
    $(this).addClass("loading");
});
*/

//this almost does what I want but if you 
//look at the console we trigger everytime
//you leave an input
$('div.editor input').focus( function() {
    $(this).parent()
        .addClass("focused")
        .focusout(function() {
            console.log('focusout');
            $(this).removeClass("focused")
                   .addClass("loading");        
        });
});