JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" >
        <input id="i" type="text" />
        <div id="Div2" class="icons" style="background-color:blue; right: 25px;" ></div>
        <div id="Div1" class="icons" style="background-color:red;" ></div>
    </div>

CSS

*
        {
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box; /* Firefox, other Gecko */
            box-sizing: border-box; /* Opera/IE 8+ */
        }

        #main
        {
            top: 50px;
            left: 200px;
            position: absolute;
            border: 1px solid #00bfff;
            width: 250px;
            height: 27px;
        }

        input
        {
            border: none;
            width: 248px;
            height: 25px;
            position: absolute;
            z-index: 200;
        }

        .icons
        {
            text-align:center;
            border:1px solid blue;
            height: 23px;
            width: 23px;
            position: absolute;
            top: 2px;
            right: 2px;
            z-index: 99999999999999999999999;
            background-position: center;
            background-repeat: no-repeat;
        }

JavaScript

$('#Div1').click(function(){
    log('Clear Clicked');
   //$('#main').focusin();
    $('#i').focus();
});
$('#Div2').click(function(){
   log('DD Clicked');
     //$('#main').focusin();
    $('#i').focus();
});
				function log(msg)
        {
            //window.console.log(msg);
            $("body").append("<p>" + msg + "</p>");
        }
				$("#main").focusin(function ()
        {
            log("Main div got focused");
        });

        $("#i").focusin(function ()
        {
            log("input got focused");
        });

        $("#Div2").focusin(function ()
        {
            log("dropdown div got focused");
        });

        $("#Div1").focusin(function ()
        {
            log("clear div got focused");
        });

        $("#main").focusout(function ()
        {
        	$(this).val(22);
            log("Main div lost focused");
        });

        $("#i").focusout(function ()
        {
            log("input lost focused");
        });

        $("#Div2").focusout(function ()
        {
            log("dropdown div lost focused");
        });

        $("#Div1").focusout(function ()
        {
            log("clear div lost focused");
        });