How can I use existing functions on new array elements in the DOM

Question

I am trying to build a simple Todo List. I have made it so the value of the input is pushed onto an array called todoItems, and it appears on the todoList. However, the added items can neither be deleted nor marked as complete.

I want it so that any new elements added to the array will appear on the list but I should be able to mark them as complete or delete them like I can with the hardcoded list items. I have looked on a few different posts and found some similar problems but could not find anyone addressing this specific issue.

Can someone please take a look and tell me what I am doing wrong?

'use strict';
const existingTodos = document.querySelectorAll(".todo-item")
const todoItems = [...existingTodos];
const deleteButtons = document.querySelectorAll(".delete");
const deleteSelected = document.querySelector(".delete-selected");
let todoList = document.querySelector(".todo-list");
const input = document.querySelector(".add-todo");

//Add todoitem to the todoItems array when enter key is pressed
input.addEventListener("keydown", event => {
    if(event.keyCode === 13){
        addTodo();
    }
})

//Add newTodo and append to the ul, set value of input to empty string
function addTodo() {
    let newItem = document.createElement("li");
    newItem.classList = "todo-item";
    newItem.innerHTML = `<span class="delete"><i class="fas fa-trash"></i></span>${input.value}`; 
    todoItems.push(newItem);
    todoList.appendChild(newItem);
    input.value = "";
}


todoItems.forEach(item => {
    item.addEventListener('click', () => item.classList.toggle("completed"));
});

 deleteButtons.forEach(deleteButton => {
     deleteButton.addEventListener('click', function(event) {
        deleteButton.parentElement.remove();
        console.log("clicked");
        event.stopPropagation;
     });
});

body, html {
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

body {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    height: 100vh;
    background-color: #fefefe;
}

.todo-box {
    box-sizing: border-box;
    grid-row: 2;
    grid-column: 2;
    background-color: #fcfcaaed;
    min-width: 200px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}

.title {
    text-align: center;
}

.title span {
    font-size: 0.7em;
}

span.minus-symbol-1 {
    margin-left: 2em;
}

span.minus-symbol-2 {
    display: none;
}


.hide {
    display: none;
}

.add-todo {
    box-sizing: border-box;
    border: 0;
    margin: 0;
    background-color: #fff;
    width: 100%;
    padding-left: 0.7em;
    height: 3em;
}

.add-todo:focus {
    outline-offset: 3px;
    outline-color: #03fc9d;
}

.todo-list {
    margin-top: 0;
    list-style: none;
    padding: 0;
    background-color: #03fc9d;
}

.todo-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity .4s;
}

.completed {
    text-decoration: line-through;
    color: rgb(163, 154, 154);
}

.todo-item:nth-of-type(2n) {
    background-color: #a1ffcd;
}

.delete {
    font-size: 1rem;
    color: #fff;
    background-color: rgba(228, 38, 38, 0.925);
    display: inline-block;
    width: 0em;
    margin-right: .6em;
    overflow: hidden;
    height: 100%;

}

.fade-out {
    opacity: 0%;
}

.delete-selected {
    display: none;
    padding: .7em;
    border-radius: 5px;
    border: none;
    background-color: rgba(228, 38, 38, 0.925);
    color: #fff;
    cursor: pointer;
}

li:hover span.delete{
    animation: delete-button 0.6s ease 0s forwards;
}

@keyframes delete-button {
    0% {
    
       width: 0em;
       padding: 0em;
    }
    100%{
        padding: .3em;
        width: 0.9em; 
    }
}

   <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<body>
    <div class="todo-box">
        <h3 class="title">Todo List<span class="minus-symbol-1"><i class="fas fa-minus"></i></span><span class="minus-symbol-2"><i class="fas fa-minus"></i></span></h3>
        <input type="text" class="add-todo" maxlength="30" placeholder="Add something">
        <ul class="todo-list">
            <li class="todo-item"><span class="delete"><i class="fas fa-trash"></i></span>First thing</li>
            <li class="todo-item"><span class="delete"><i class="fas fa-trash"></i></span>Second thing</li>
            <li class="todo-item"><span class="delete"><i class="fas fa-trash"></i></span>Third thing</li>
            <li class="todo-item"><span class="delete"><i class="fas fa-trash"></i></span>Fourth thing</li>
            <li class="todo-item"><span class="delete"><i class="fas fa-trash"></i></span>Fifth thing</li>
            <li class="todo-item"><span class="delete"><i class="fas fa-trash"></i></span>Sixth thing</li>
        </ul>
        <button class="delete-selected">Delete selected</button>
    </div>
    
    <script src="todo.js"></script>
</body>

Thanks