JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<form name="newItem" id="newItem">
    <input type="text" class="text_field" id="task" placeholder="Write a new task here..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write a new task here...'" />
    <input type="button" id="addItem" class="add_btn" value="Add" />
    </form>
    <div class="items">
        <ul id="tasks" class="sortable">
            <li>
                <input class='tasks' type='checkbox' />
                <p>Meet Larry at 6pm</p>
            </li>

            <li>
                <input class='tasks' type='checkbox' />
                <p>Ovesyan cool mandsadd</p>
            </li>

            <li>
                <input class='tasks' type='checkbox' />
                <p>dsadsa dsadasda adsdasddasdasdasda</p>
            </li>
        </ul>
    </div>
</div>

JavaScript

$("#addItem").click(function(){
    var task = $('#task').val();
    $("#tasks").append("<li><input class='tasks' type='checkbox' /><p>" + task + "</p></li>");
  });

 $("#newItem").on('submit',function(e){                 
   //add stuff to database if necessary
     e.preventDefault();
     return false;
  });