JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<span class="group1 red">Test span</span>

<div id="group1-container">
    <input class="group1" type="text" />
    <input class="group1" type="text" />
    <input class="group1" type="text" />
    <input class="group1" type="text" />
    <input class="group1" type="text" />
</div>

CSS

.red {
    color: red;
}
input {
    display: block;
}

JavaScript

group1Container$ = $('#group1-container');
group1$ = $('input.group1', group1Container$);
group1$.on('focus', function() {
    var input$ = $(this);
    input$.addClass('focused');
    if(!$('input.group1:not(.focused)', group1Container$).length) {
        $('span.group1').removeClass('red');
        group1$.off('focus');
    }
});