JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
            <div id="contentBlock"></div>
            <button type="button" id="addTODOLis">Add TODO List</button>

CSS

body{
    background: #ba680f url(images/background.png) repeat-x scroll 0 0;
}
 
h1 {
    text-align: center;
    margin: 60px 0 40px 0;
    font-size: 28px;
    text-transform: uppercase;
    text-shadow: 1px 1px #fff;
    font-weight: bold;
}
 
h1 small {
    color: #000;
}
 
#addTODOLis{
    height: 45px;
    width: 175px;
    background:  url(images/bg-btn.png) repeat-x scroll 0 0;
    color: white;
    font-size: larger;
    cursor: pointer;
}
 
#addTask{
    height: auto;
    width:  auto;
    background:  url(images/bg-btn.png) repeat-x scroll 0 0;
    color: white;
    cursor: pointer;
    margin-left: -5px;
}
 
.project{
    background:  url(images/bg-btn.png) repeat-x scroll 0 0;
    margin-left: 92px;
    width: 80%;
}
 
.nameProgect{
    color: white;
    font-size: 1.3em;
    margin: 7px 17px 7px 7px;
}
.showTools{
    visibility: hidden;
}
.showTools:hover{
    visibility: visible;
}
 
.hideTools{
    display: none;
}
 
td.dragHandle {
 
}
 
td.showDragHandle {
    background-image: url(images/updown2.gif);
    background-repeat: no-repeat;
    background-position: center center;
    cursor: move;
}

JavaScript

//функция создает элементы и их свойства
function elmt(name, attributes) {
    var node = document.createElement(name);
 
    if (attributes) {
        for (var attr in attributes)
            if (attributes.hasOwnProperty(attr))
                node.setAttribute(attr, attributes[attr]);
    }
    for (var i = 2; i < arguments.length; i++) {
        var child = arguments[i];
        if (typeof child == "string")
            child = document.createTextNode(child);
        node.appendChild(child);
    }
    return node;
}
 
//функция перемещения строк табл
function dragDropTable() {
    //сторонния либа
    /*$('table').tableDnD({
        dragHandle: ".dragHandle"
    });*/
    //перемещаем строки
    var fixHelper = function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
    };
    $(".box_table tbody").sortable({
        helper: fixHelper
    }).disableSelection();
//отображение иконки
    $("table tr").hover(function () {
        $(this.cells[0]).addClass('showDragHandle');
    }, function () {
        $(this.cells[0]).removeClass('showDragHandle');
    });
}
 
//функция редактирвоания строки табл
function editTask() {
    //получаем доступ к ячейке
    var accessToValue = $(this).closest('tr').find('td.context');
 
    //ПОЛУЧАЕМ СОДЕРЖИМОЕ ЯЧЕЙКИ
    var val = accessToValue.html();
    var code = '<input type="text" id="edit" value="' + val + '" style="border: none"/>';
    //удаляем содержимое и вставляем поле
    accessToValue.empty().append(code);
    //устанавливаем фокус на поле
    $('#edit').focus();
    //прячем поле и обновляем данные
    $('#edit').blur(function () {
        var val = $(this).val();
        accessToValue.html(val);
    });
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            $('#edit').blur();
        }
    });
}
 
//функция добавить задачу в табл(добавить строку)
function addTask() {
    /*$('.box_btn').click(function ()...