Which is a better way to code the To-do list application?

// problem: user ineraction does not provide desired result
// solution: add interactivity so the user can manage daily tasks.
//--------------------------------

    var $newTask;
    var newTaskString;

    var createNewTaskByComponents = function(){
    $newTask = $('<li></li>');
    var $checkbox = $('<input>').attr('type', 'checkbox');   
    newTaskString = $('#new-task').val();                             
    var $label = $('<label></label>').text(newTaskString);  
    var $inputText = $('<input>').attr('type', 'text') ;
    var $editButton = $('<button></button>').addClass('edit').text('Edit');                             
    var $deleteButton = $('<button></button>').addClass('delete').text('Delete');                             

    $newTask.append($checkbox);
    $newTask.append($label);
    $newTask.append($inputText);
    $newTask.append($editButton);
    $newTask.append($deleteButton);

   }                                   

// when Add Button is clicked
  $('#new-task').next().on('click', function(newTask){
    console.log('add new task'); 
    // create new list item
   createNewTaskByComponents();
    // if the new task string is empty don`t append it to the incomplete task list
    if (newTaskString !== '') {
       //append to incomplete tasks ul
    $newTask.appendTo("#incomplete-tasks");
    $('#new-task').val('');
  }    
  });


// when  Edit button is clicked
$('ul').on('click', '.edit', function(){
  console.log('edit task');
   // switch list item to edit mode (input format) and back - toggle edit mode
  if($(this).parent().hasClass('editMode')){  
  // text input value becomes label`s text
      $(this).prev().prev().text($(this).prev().val());
      $(this).parent().removeClass('editMode');
      $(this).text('Edit');
  }else {
      $(this).parent().addClass('editMode');
      $(this).text('Save'); // when a task is edited switch 'Edit' button to 'Save'
  }
});


// when Delete button is clicked
$('ul').on('click', '.delete', function(){
  console.log('delete task');
   //remove list item
 $(this).parent().remove();
});


// when checbox is checked ( task is complete )
  $('#incomplete-tasks').on('change', 'input[type = checkbox]' , function(){
    console.log('trying checkbox');
       if( $(this).prop('checked', true ) ) {
          $(this).parent().appendTo('#completed-tasks'); 
       } else if ( $(this).prop('checked', false) ){
        $(this).parent().appendTo('#incomplete-tasks'); // append list item to incomplete-tasks ul
     } 
 });

   $('#completed-tasks').on('change', 'input[type = checkbox]' , function(){
    console.log('trying checkbox');
       if ( $(this).prop('checked', false) ){
        $(this).parent().appendTo('#incomplete-tasks'); // append list item to incomplete-tasks ul
     } 
 });