JSFiddle - React, Tailwind, and code Playground

HTML

<title>To Do List</title>
    <!-- Insert your css file here -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
 
  <body>
 
    <div class="container">
      <div class='top'>
        Item to add to list: <input type="text" name="list" class="inputValue">
      <button type="submit" class="add">Add</button>
      </div>
 
 
      <div class="todo-list">
        <ol class="list-one">
          <h4>ToDo List</h4>
          
        </ol>
      </div>
 
      <div class="completed-list">
        <ol class="list-two">
          <h4>Completed List</h4>
        </ol>
      </div>
    </div>
 
  </body>
 
  <script src="todojs.js"></script>
</html>

JavaScript

$(document).ready(function() {
    $('button').on('click', function() {
        event.preventDefault();
       //above is called event binding
        
        
        //var itemValue = $('input').val();
        //the above is bad code 'cuz if there's multiple input, this may result in error.
        var itemValue = $('input.inputValue').val();
        // we can also do: $input = $('input');
        var listItem = $('<li>' + itemValue + '<input type="checkbox" class="checkToDo"><button class="remove">Remove</button></li>');
        listItem.css('background', 'green);
            
        //add list item to list one
        $('.list-one').append(listItem);
        $('input').val('');
   
        //add checkbox to todo item to move to completed list
        $(".checkToDo").click(function(){
            $(this).parent().appendTo("ol.list-two");
        });
        
        //add remove botton on todo item to remove it
         $(".remove").click(function(){
             $(this).parent().remove();
        });
    });
 
});