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">
     <h1>Click "create pad" to create multiple instances of JQueryTE. The orange button is supposed to open/close the editor but it does not work</h1>

    <p id="createPad">Create Pad</p>

CSS

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

JavaScript

var editorNumberCounter = 0;
var toggleOnOffCounter = 0;
$(document).ready(function () {

    var createPad = $("#createPad").click(function () {
        var body = document.getElementById("body");

        var editorName = '.' + editorNumberCounter++;
        toggleOnOffCounter++;


        var status = document.createElement('div');
        status.className = "status";
        status.id = "div_status" + editorNumberCounter;

        var editorName = document.createElement('span');
        editorName.className = "status";
        editorName.id = "span_status" + editorNumberCounter;

        $(body.appendChild(status));
        $(body.appendChild(editorName));

        $(editorName).jqte();

        // settings of status
        var jqteStatus = true;
        $("#div_status" + editorNumberCounter).bind("click",function () {
            jqteStatus = jqteStatus ? false : true;
            $(this).next().jqte({
                status: jqteStatus
            })
        });

    });

});