JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div id="1" class="editor">
    <input type="text" />
    <input type="text" />
</div>
<div id="2" 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.loaded {
    background: blue;
}
div.focused {
    background: green;
}

JavaScript

function loadData() {
    console.log('loading data for editor ' + $(this).attr('id'));
    var $editor = $(this).removeClass('loaded')
        .addClass('loading');

    $.post('/echo/json/', {
        delay: 2
    })
        .done(function () {
        $editor.removeClass('loading')
            .addClass('loaded');
    });
}

$('div.editor input').focusin(function(){
    var $editor = $(this).closest('.editor');
    $editor.addClass("focused").removeClass("loading");
   
}).focusout(function () {
    var $editor = $(this).closest('.editor');
    // wait for the new element to be focused
    setTimeout(function () {
        // See if the new focused element is in the editor
        if (!$.contains($editor[0], document.activeElement)) {
            $editor.removeClass("focused").each(loadData);
        }
    }, 0);
});