JSFiddle - React, Tailwind, and code Playground

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').on('focusin', function () {
    console.log('focus changed');
    $editor = $(this).closest('.editor');
    console.log('current editor is ' + $editor.attr('id'));
    if (!$editor.hasClass('focused')) {
        console.log('switched editors');

        $('.editor.focused')
            .removeClass('focused')
            .each(loadData);

        $editor.addClass('focused');
    }
});