Weird Problem

// Problem: User Interaction doesn't provide desired results
// Solution: Add interactivity for users to manage daily tasks


var taskInput = document.getElementById("new-task"); // new-task
var addButton = document.getElementsByTagName("button")[0]; // first button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); // incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); // completed-taks

var createNewTaskElement = function (taskString) {
  // Create List Item
  var listItem = document.createElement('li');
  // input (checkbox)
  var checkBox = document.createElement('input'); // checkbox
  // label
  var label = document.createElement('label');
  // input (text)
  var editInput = document.createElement('input');  
  // button with class .edit
  var editButton = document.createElement('button');
  // button with class .delete
  var deleteButton = document.createElement('button');

  // Each element needs modifying

  // Each element needs appending
  listItem.appendChild(checkBox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

  return listItem;
};

// Add new task
var addTask = function () {
  // Create a new list item with the text from #new-task
  var listItem = createNewTaskElement('New Task');

  // append listItem to IncompleteTasksHolder
  incompleteTasksHolder.appendChild(listItem);

  bindTaskEvents(listItem, taskCompleted);
};

// Edit existing task
var editTask = function () {
  console.log('Editing Task ...');
  // When the Edit button is pressed
    // if the class of the parent is .editMode
      // Switch form .editMode
      // label text becomes the input's value
    // else
      // Switch to .editMode
      // input value becomes label's text

    // Toggle .editMode on the parent
};

// Delete task
var deleteTask = function () {
  console.log('Deleting Task ...');
  // When Delete is pressed
    // Remove the parent list item from the ul
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  ul.removeChild(listItem);
};

// Mark task as complete
var taskCompleted = function () {
  console.log('Task Comlete ...');
  // append the task list item to the #completed-tasks
  var listItem = this.parentNode;

  completedTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);
};


// Mark task as incomplete
var taskIncomplete = function () {
  console.log('Task Incomplete ...');
  // append the task list item to the #incomplete-tasks
  var listItem = this.parentNode;

  IncompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
};



var bindTaskEvents = function (taskListItem, checkboxEventHandler) {
  // select taskListItem's children
  var checkBox = taskListItem.querySelector('input[type="checkbox"]');
  var editButton = taskListItem.querySelector('button.edit');
  var deleteButton = taskListItem.querySelector('button.delete');
  // bind editTask to edit button
  editButton.onclick = editTask;
  // bind deletTask with delete button
  deleteButton.onclick = deleteTask;
  // bind checkboxEventHandler to the checkbox
  checkBox.onchange = checkboxEventHandler;
};

addButton.onclick = addTask;

// Cycle over incompleteTasksHolder ul list
for ( var i = 0; i < incompleteTasksHolder.children.length; i += 1 ) {
  // bindTaskEvents()
  bindTaskEvents(incompleteTasksHolder.children.item(i), taskCompleted);
}

// Cycle over completedTasksHolder ul list
for ( var i = 0; i < completedTasksHolder.children.length; i += 1 ) {
  // bindTaskEvents()
  bindTaskEvents(completedTasksHolder.children.item(i), taskIncomplete);
}