JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lab.jakiestfu.com/contextjs/context.js"></script>
<link rel="stylesheet" href="http://lab.jakiestfu.com/contextjs/context.standalone.css">
<div id="container">
     <div class='label-item-text drag' data-type='text'>
         <div>Right click on me and check the HTML of the duplicated</div>
     </div>
</div>

CSS

#container{
    height: 300px;
    width: 300px;
    background-color: #c0c0c0;
}

.label-item-text div{
    font-size: 17px;
    padding: 10px;
}

JavaScript

$dragRightClick = null;

$(function(){
    setContext();
});

$(document).on('mousedown', '.drag', function(event){
	if(event.which === 3){ // mouse right	
		$dragRightClick = $(this);
	}
});
            
function setContext(){
    context.attach('.drag', [
		{header: 'Options'},
			{text: 'Duplicate', action: function(e) { duplicateItem(); e.preventDefault();}},
	]);
}
        
function duplicateItem(){
    
    console.log("Default: " + $dragRightClick);
    console.log("HTML: " + $dragRightClick.html());  
    console.log("Context: " + $dragRightClick['context']);
    console.log("HTML Parent: " + $dragRightClick.parent().html());
    $('#container').append($dragRightClick[0].outerHTML);
    
    setContext();
}