Why the classes applied to append child from js do not work?

Question

I am making a To Do List project using html, css and javascript/jquery.

The approach I took is to process the input from the user in the index.js, storing that value and creating a new <li> everytime there is a "keydown" = enter from the user after adding the info. This <li> contains the value from input-text plus a circle used as checkbox and a cross to delete info if needed.

The problem is that I have set some CSS toggleClass from index.js on click and on hover, but they don't work with the new appended items, they only work with if I create the <li> individually.

What am I doing wrong?

let toDoItems = [];
var storedItems = [];

window.onload = function createOldItems() {
  if (localStorage.getItem("storedItems") != null) {
    storedItems = JSON.parse(localStorage.getItem("storedItems"));
    toDoItems = storedItems;
    function create() {
      for (i = 0; i < storedItems.length; i++) {
        var newLi =
          "<li>" +
          "<span class='dot'><svg class='check' xmlns='http://www.w3.org/2000/svg' width='11' height='9'><path fill='none'stroke='#FFF'stroke-width='2'd='M1 4.304L3.696 7l6-6'/></svg></span>" +
          "<h4>" +
          storedItems[i] +
          "</h4>" +
          "<svg class='cross' xmlns='http://www.w3.org/2000/svg'width='18' height='18'><path fill='#494C6B' fill-rule='evenodd' d='M16.97 0l.708.707L9.546 8.84l8.132 8.132-.707.707-8.132-8.132-8.132 8.132L0 197l8.132-8.132L0 .707.707 0 8.84 8.132 16.971 0z'></path></svg>" +
          "</li>";

        $("#myUl").append(newLi);
      }
    }
    setTimeout(create, 500);
  } else {
    alert("no");
  }
};

function createNewItems() {
  for (i = 0; i < toDoItems.length; i++) {
    var newLi =
      "<li>" +
      "<span class='dot'><svg class='check' xmlns='http://www.w3.org/2000/svg' width='11' height='9'><pathfill='none'stroke='#FFF'stroke-width='2'd='M1 4.304L3.696 7l6-6'/></svg></span>" +
      "<h4>" +
      toDoItems[i] +
      "</h4>" +
      "<svg class='cross' xmlns='http://www.w3.org/2000/svg'width='18' height='18'><path fill='#494C6B' fill-rule='evenodd' d='M16.97 0l.708.707L9.546 8.84l8.132 8.132-.707.707-8.132-8.132-8.132 8.132L0 197l8.132-8.132L0 .707.707 0 8.84 8.132 16.971 0z'></path></svg>" +
      "</li>";

    $("#myUl").append(newLi);
  }
}

window.onbeforeunload = function () {
  localStorage.setItem("storedItems", JSON.stringify(toDoItems));
};

$("#myInput").on("keydown", function (event) {
  var toAdd = $("#myInput").val();
  if (event.keyCode === 13) {
    event.preventDefault();
    toDoItems.push(toAdd);
    $("li").remove();

    createNewItems();
  } else {
  }
});