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="addTODOList">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 {

}
tr:hover .dragHandle {
  background-image: url(http://i.imgur.com/JZGp8dt.gif);
  background-repeat: no-repeat;
  background-position: center center;
  cursor: move;
}
.box_btn {
  width:100px;
  height:40px
}
.box_table button {
  display: inline-block;
  cursor: pointer;
}
.box_table .context[contenteditable=true] {
  background: #fff;
}

JavaScript

$("#addTODOList").on("click", addList);
$('#contentBlock').on('click', '.box_btn', addTask);
$('#contentBlock').on('click', '.edit', editTask);
$('#contentBlock').on('click', '.delete', function(){
  $(this).closest('tr').remove();
});
$('#contentBlock').on('blur', '.context', function(){
	$(this).attr('contenteditable', 'false');
});
$('#contentBlock').on('keydown', '.context', function(evt){
  if (evt.keyCode == 13) {// what about ctrl+v with new line?
    $(this).blur()
  }
});
//функция редактирвоания строки табл
function editTask() {
  $(this).closest('tr').find('td.context')
  	.attr('contenteditable', 'true').focus();
}
//функция добавить задачу в табл(добавить строку)
function addTask() {
  var task = '<tr>'
  +'<td class="dragHandle" style="width: 10px;"></td>'
  +'<td><input type="checkbox"></td>'
  +'<td class="context">'+$(this).siblings('.box_input').val()+'</td>'
  +'<td><button class="edit">Edit</button></td>'
  +'<td><button class="delete">Delete</button></td></tr>'

  $(this).siblings('.box_table').append(task);
}
function addList() {
  var controls = '<div class="box">'
  +'<input class="box_input" type="text" style="width:20%; height:2em">'
  +'<button class="box_btn">Add task</button>'
  +'<table class="box_table"><tbody></tbody></table></div>'

  $("#contentBlock").append(controls)
  .find('.box_table tbody').sortable().disableSelection();
}