JSFiddle - React, Tailwind, and code Playground

by taoist

HTML

<script src="http://jqueryte.com/js/jquery-te-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://jqueryte.com/css/jquery-te.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<body id="body">
<p id="createPad"> Create Pad </p>

CSS

.status{
	width:50px;
	height:50px;
	background-color:orange;
}

JavaScript

"use strict";
$(document).ready(function() {
     var editorNumberCounter = 0;
    
     $("#createPad").dblclick(function () {
        var body = document.getElementById("body");
        
       
                
        var status = document.createElement('div');
        status.className = "status";
        status.id = "status" + editorNumberCounter;
        
        var editorName= document.createElement('span');
        editorName.id = "jqte-test" + editorNumberCounter;
        
        $(body.appendChild(status));
        $(body.appendChild(editorName));
        
        var toggle = '#' + status.id;
         var numberEditorName = '#' + editorName.id;
 
        $(numberEditorName).jqte();
	
	// settings of status
	var jqteStatus = true;
       
        $(toggle).click(function(){
            jqteStatus = jqteStatus ? false : true;
            $(numberEditorName).jqte({status : jqteStatus})
        });
         
	editorNumberCounter+=1;
         
	 });
	
	});