JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="example1" onfocus="focushandler('divID1');"></textarea>
<br />
<textarea id="example2" onfocus="focushandler('divID2');"></textarea>
<br />

<div id="divID1">
    <p>This div is blue</p>
    <br />
    <input type="checkbox" />Checkbox A
</div>
<div id="divID2">
    <p>This div is green</p>
    <br />
    <input type="checkbox" />Checkbox B
</div>

CSS

#divID1 {
    height:200px;
    width:150px;
    background-color:#00bcff;
    text-align:center;
    display:none;
    float:right;
}
#divID2 {
    height:200px;
    width:150px;
    background-color:#41ea00;
    text-align:center;
    display:none;
    float:right;
}

JavaScript

var current = null; //currently shown div - divID1 or divID2

function focushandler(id) {
    if (current!==null) {
        current.style.display = 'none';
    }
    var div = document.getElementById(id);
    div.style.display='block';
    current = div;
}

function clickhandler(e) {
    if (current == null){ //if both divs are hidden
        return;
    }
    e = e||window.event; //for IE8,7 compatibility
    var t = e.target || e.srcElement; // clicked element
    var sig = false;
    // now check all parents
    while (t) {
        if (t === current || t.nodeName == 'TEXTAREA') {
            sig = true;
        }
        t = t.parentNode;
    }
    if (sig) {
        return;
    }
    current.style.display='none';
    current = null;
}

if (document.documentElement.addEventListener) {
document.documentElement.addEventListener('click',clickhandler,false);
} else if (document.documentElement.attachEvent) {
    document.documentElement.attachEvent('onclick',clickhandler); //IE87
}