JSFiddle - React, Tailwind, and code Playground

by Hawkee

HTML

<div id="code_block" style="display: none; margin-left: 10px; margin-right: 10px;" contenteditable='false'><b>Code</b><div id='code123' style="margin-top: 5px; width: 370px; min-height: 90px; background-color: #F7F7F7; border: 1px solid #999;" contenteditable="true"></div></div>

<br>
<div id="post123" style="margin-left: 10px; width: 400px; min-height: 120px; background-color: #FFFFEE; border: 1px solid #999;" contenteditable="true"></div><br><br>

&nbsp;&nbsp;<a href='#' id='click123'>Add Code Block</a>

JavaScript

$(document).ready(function() {
   
    $('#click123').click(function() {
        var obj = $('#code_block').clone().show();
        
        $('#post123').append("<div><br></div>");
        $('#post123').append(obj);
        $('#post123').append("<div><br><br></div>");

        obj.find('#code123').focus();
    });

});