JSFiddle - React, Tailwind, and code Playground

by BenjaminRH

HTML

<html>
    <body>
        <a href="#" id="addP">P tag</a> or <a href="#" id="addDiv">Div tag</a><br/><br/>
        <textarea id="updateP"></textarea>
        <textarea id="updateD"></textarea>

        <div id="Test"></div>

                     </body>
</html>

CSS

.test { color: #000; padding: .5em; margin: 0px; border: 2px solid white; background: white;} 

.help { border: 2px dashed #FDD }

.inside { border: 2px dashed red    }

.insider { border: 2px solid #FDD; }

.delete {  font-size: 12px; }
.customD { background: yellow}

JavaScript

$(document).ready(function(){

var pid = 1;
    $("#addP").on({
        click: function(){
            var pr = $('<p />').attr({'class':'test', 'id':'paragraph_' + pid}).text('This is a paragraph ' + pid);
            var d = $("#Test");
            var pclone = $(pr).clone();
            pclone.on({
                mouseenter: function(){    
                    $(this).addClass("inside");
                },
                mouseleave: function(){                             
                    $(this).removeClass("inside"); 
                },
                        });
            pclone.appendTo(d);
pid++;
        }
    });
var divid = 1;
    $("#addDiv").on({
        click: function(){
            var pr = $('<div />').attr({'class':'test', 'id':'div_' + divid}).text('This is a div ' + divid);
            var d = $("#Test");
            var pclone = $(pr).clone();
            pclone.on({
                mouseenter: function(){    
                    $(this).addClass("inside");
                },
                mouseleave: function(){                             
                    $(this).removeClass("inside"); 
                },
                        });
            pclone.appendTo(d);
divid++;
        }
    });




    var div =  $('<div class="customD" id="d"></div>');
    var del = $('<a href="#" class="delete" id="erase">Delete</a>');
    
    $('#updateP').hide();
    $('#updateD').hide();

var flag = false;
$("#Test").on("click", "p, div", function(){ 
    var cur = $(this).css("background-color");

   
       if(cur=="rgb(255, 255, 255)") {  
           if(flag==false){
               $('#updateP').show();
                $('#updateD').show();

        $(this).css("background-color","#FDD").addClass("help insider").after(div);
flag = true;

    }

    }
 else { 
     $('#updateP').hide();
     $('#updateD').hide();
             
                $(this).css("background-color","white").removeClass('help insider');
     $(div).remove();
flag =...