JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head></head>
    <body>
        <p>You can create as many draggable divs as you wish while pressing the OK button. You can drag them around and still create more DIVs. As soon as you hit the KO button, you have one more drag left, and afterwards, all of the draggable divs will stop working. You will be able to still create more, but they wont be draggable any more. They are created in the exact same way
        NOTE: to create KO annotations, pres mouse down, draw the desired size and release mouse button.</p>
        <input type="submit" value="createNote OK" class="button" id="createFrameOK" />
         <input type="submit" value="createNote KO" class="button" id="createFrameKO" />
        <div class="frame" id="oframe" style="display:none"></div>
    </body>
</html>

CSS

.frame{position: absolute; background-color:#ccc;}

JavaScript

$(function() {
    var oFrame = $('#oframe');
    var annotations = new Array();
    $('#createFrameOK').click(

    function(e) {
        e.preventDefault();
        console.log("Creating note");
        $(document).click(function(ee) {
            $(document).off('click');
            console.log("Place frame at " + ee.pageX + ":" + ee.pageY);
            annotations.push(new Annotation(oFrame.clone(), ee.pageX, ee.pageY, 100, 100));
        });
    });

    function drawDiv(inix, iniy, c, e) {
        var x = e.pageX;
        var y = e.pageY;
        var twb = parseInt(c.css("border-left-width")) + parseInt(c.css("border-right-width"));
        var thb = parseInt(c.css("border-top-width")) + parseInt(c.css("border-bottom-width"));
        if (inix > x) {
            c.css({
                left: x,
                width: inix - x - twb
            });
        } else {
            c.width(x - inix - twb);
        }
        if (iniy > y) {
            c.css({
                top: y,
                height: iniy - y - thb
            });
        } else {
            c.height(y - iniy - thb);
        }
    }
    $('#createFrameKO').click(

    function(ev) {
        ev.preventDefault();
        console.log("Creating frame");
        $(document).mousedown(function(e) {
            e.preventDefault();
            console.log("Start frame at " + e.pageX + ":" + e.pageY);
            var c = oFrame.clone().css({
                display: 'inline',
                top: e.pageY,
                left: e.pageX
            });
            c.insertAfter(oFrame);
            $(document).on('mousemove', function(ex) {
                ex.preventDefault();
                drawDiv(e.pageX, e.pageY, c, ex);
            });
            $(document).mouseup(

            function(ez) {
                ez.preventDefault();
                $(document).off('mouseup');
                $(document).off('mousemove');
                $(document).off('mousedown');
               ...