Why my functions don't work on the new created li's?

Question

I'm trying to make a todo list, with two functions (markAsDone and deleteAfterClick) and I managed to make them work. But when I add new li elements, those function don't work with them.

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li");
var btn = document.querySelectorAll(".btn");

function inputLength() {
  return input.value.length;
}

function createListElement() {
  var li = document.createElement("li");
  var btn = document.createElement("button");
  var i = document.createElement("i");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  li.appendChild(btn);
  btn.appendChild(i);
  btn.classList.add("btn");
  i.classList.add("fa", "fa-trash");
  input.value = "";
}

function addListAfterClick() {
  if (inputLength() > 0) {
    createListElement();
  }
}

function addListAfterKeypress(event) {
  if (inputLength() > 0 && event.keyCode === 13) {
    createListElement();
  }
}

function markAsDone() {
  for (let i = 0; i < li.length; i++) {
    li[i].addEventListener("click", function () {
      li[i].classList.toggle("done");
    });
  }
}

function deleteAfterClick() {
  for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click", function () {
      li[i].parentNode.removeChild(li[i]);
    });
  }
}

markAsDone();
deleteAfterClick();

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);