JSFiddle - React, Tailwind, and code Playground

HTML

<div id="templateMenuRoot" style="display:none;">
	<div class="container">
		content here content here content here content here<br>
        my data: <span id="data"></span>
	</div>
</div>
<!-- here is a row of buttons that are all menuable -->
<div class="menuWrap cf">
    <div class="button" id="button-1">
    </div>
    <div class="button" id="button-2">
    </div>
    <div class="button" id="button-3">
    </div>
</div>
<!-- another row.. -->
<div class="menuWrap cf">
    <div class="button" id="button-4">
    </div>
    <div class="button" id="button-5">
    </div>
    <div class="button" id="button-6">
    </div>
</div>

CSS

.button{
    float:left;
    width:50px;
    height:37px;
    box-sizing:border-box;
    border:1px solid #ccc;
    cursor:pointer;
    margin-right:25px;
}
.menuWrap{
    padding:2px;
    border:1px solid #444;
    margin-bottom:35px;
    margin-left:75px;
}
.cf:before {
    content: "";
    display: table;
}
.cf:after {
    clear: both;
    content: "";
    display: table;
}
#templateMenuRoot{
	background-color:rgba(0,0,0,0.45);
	border-radius:5px;
	padding:4px;
	width:200px;
	box-sizing:border-box;
	z-index:1000;
	position:absolute;
	}
#templateMenuRoot .container{
	background-color:white;
	min-height:175px;
	box-sizing:border-box;
	padding:7px 10px;
	}

JavaScript

$(document).ready(function(){
	$('.button').click(function(e){
		var id=$(this).attr('id');
		if(!$('#templateMenuRoot').data('encounter'))$('#templateMenuRoot').data('encounter','');
		if($('#templateMenuRoot').is(':hidden') || $('#templateMenuRoot').data('encounter')!=id){
			$('#templateMenuRoot').data('encounter',id);
            $('#data').html(id);
			$('#templateMenuRoot').position({
				at: "right bottom+2",
				my: "right top",
				collision: 'fit',
				of: $(this)
			});
			$('#templateMenuRoot').fadeIn(400);							
		}else{
			$('#templateMenuRoot').fadeOut(400);
		}
		
	});
});