JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<table>
<tr>
<td>
    <div id="t1" style="width:100px;height:30px; background:#009814; border:medium solid; border-color:#fff" onclick="showPopup(this)"></div>
    <div id="t11" style="display:none" title="Indicators"><input type="checkbox"/> Indicators go here </div>
</td>
</tr>

<tr>
<td>
    <div style="width:100px;height:30px; background:blue; border:medium solid; border-color:#fff" onclick="showPopup(this)"></div>
    <div style="display:none" title="Indicators"><input type="checkbox"/> Indicators go here </div>
</td>
</tr>

<tr>
<td>
    <div style="width:100px;height:30px; background:red; border:medium solid; border-color:#fff" onclick="showPopup(this)"> </div>
    <div style="display:none" title="Indicators"><input type="checkbox"/> Indicators go here </div>
</td>
</tr>
</table>
<div id="dialog"></div>

JavaScript

function showPopup(elem) {
	// retrieve the hidden element after the clicked div
    var el = $($(elem).siblings()[0]);
	// append it to the #dialog container, show the content and display the dialog()
    var dialog = $('#dialog').html('').append(el.show()).dialog({
        closeOnEscape: true,
        beforeClose: function (event, ui) {
			// hide the element again and re-add it behind the clickable element
			el.hide().insertAfter($(elem));
        }
    });
}