JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <form>
        <div class="field">
            <input id="demo" type="text" name="demo" />
        </div>
        <div class="field">
            <input id="demo2" type="text" name="demo2" />
        </div>
    </form>
</div>

CSS

#container {
    width: 600px;
    height: 600px;
    background: blue;
}

.field {
    background: green;
}

JavaScript

$(document).ready(function() {
    $('#container').click(function(evt) {
        if(this == evt.target) {
            console.log('clicked container',evt.target);
            $('#demo').focus();
        } else {
            console.log('clicked child -> ignoring');
        }
    });
    
    $('.field').click(function(evt) {
        if(this == evt.target) {
            console.log('clicked field div',evt.target);
            $(this).find('input').focus();
        } else {
            console.log('clicked child -> ignoring');
        }
    });
});