JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cuboid" style="left: 20%; top: 25%; height: 50%; width: 60%; ">
    <div class="Testys-hold" id="Testys">
        <div class="cuboid" id="Testys-1" style="left: 0px; top: 0px; height: 25%; width: 20%; ">Testys-1</div>
        <div class="cuboid" id="Testys-2" style="left: 20%; top: 0px; height: 25%; width: 60%; ">Testys-2</div>
        <div class="cuboid" id="Testys-3" style="left: 80%; top: 0px; height: 25%; width: 20%; ">Testys-3</div>
        <div class="cuboid" id="Testys-4" style="left: 0px; top: 25%; height: 50%; width: 20%; ">Testys-4</div>
        <div class="cuboid" id="Testys-5" style="left: 20%; top: 25%; height: 50%; width: 60%; ">Testys-5</div>
        <div class="cuboid" id="Testys-6" style="left: 80%; top: 25%; height: 50%; width: 20%; ">Testys-6</div>
        <div class="cuboid" id="Testys-7" style="left: 0px; top: 75%; height: 25%; width: 20%; ">Testys-7</div>
        <div class="cuboid" id="Testys-8" style="left: 20%; top: 75%; height: 25%; width: 60%; ">Testys-8</div>
        <div class="cuboid" id="Testys-9" style="left: 80%; top: 75%; height: 25%; width: 20%; ">Testys-9</div>
    </div>
</div>

<div>
    <p id="output">Output: </p>
    
</div>

CSS

DIV.cuboid
{
    position: absolute;
    border: 1px dashed #000;
    overflow: hidden;
    height: 60%;
    width: 100%;
    top: 0%;
    left: 0%;
}

p.output
{
    border 2px;
   
}

JavaScript

var clicky = function()
    {
        var currentClickedDIV = this.id;
            $('#output').append("Clicked: "+currentClickedDIV +"<BR>");   
        var currentClickedDIVContent = $(this).html();
            $('#output').append("HTML: "+currentClickedDIVContent +"<BR>" );  
        
       //Make current html content editable
       $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>");
        
         //prevent more triggers within element       
       $(this).off("click").on("click", function (e) {
            e.stopPropagation();
        });
        //Focus cursor on input
        $("#currentInput").focus();
        
        $that = $(this);
        //On blur replace with plain html, also reenable click?
        $("#currentInput").blur(function(){
            var currInput = $("#currentInput").val();
            $("#"+currentClickedDIV).html(currInput );
            $('#output').append("New HTML: "+ currInput  +"<BR>" );
            $that.on("click", clicky);
        });
        
        
        return false;
    }

$('.cuboid').on('click', clicky );