Cannot set property 'onkeyup' of null

Question

i´m doing a js trello clone, which consists on making several to do lists but without using OOP. The thing is that i made a to do list and it worked fine.

index.html:

<div class="wrapper">
        <header>To do</header>
        <div class="inputField">
            <input type="text" placeholder="Add new item">
            <button><i class="fas fa-plus"></i></button>
        </div>
        <ul class="todoList">
            
            
        </ul>
        <div class="footer">
            <span>You have <span class="pendingNumb"></span> items pending</span>
            <button>Clear All</button>
        </div> 

</div>

script.js: And this functions generates a list with different items as i click in the add button.

const inputBox = document.querySelector(".inputField input");
const addBtn= document.querySelector(".inputField button");
const todoList= document.querySelector(".todoList");
const deleteAllBtn = document.querySelector(".footer button");

inputBox.onkeyup = ()=>{
    let userData = inputBox.value;
    if(userData.trim() != 0){
        addBtn.classList.add("active");
    } else {
        addBtn.classList.remove("active");
    }
}

showTask();


addBtn.onclick = () =>{
    
    let userData = inputBox.value;
    let getLocalStorage = localStorage.getItem("New Todo");
    
    if(getLocalStorage == null){
        listArr = [];

    } else {
        listArr = JSON.parse(getLocalStorage);
    }

    listArr.push(userData);
    localStorage.setItem("New Todo", JSON.stringify(listArr));
    showTask();
    addBtn.classList.remove("active");
}


//showTask permite agregar una tarea nueva a la lista dentro de el ul

function showTask(){
    let getLocalStorage = localStorage.getItem("New Todo");
    if(getLocalStorage == null){
        listArr = [];

    } else {
        listArr = JSON.parse(getLocalStorage); //Transformar un json string en un objeto de js
    }
    const pendingNumb = document.querySelector(".pendingNumb");
    
    pendingNumb.textContent = listArr.length;
    
    if (listArr.length > 0){
        deleteAllBtn.classList.add("active");
    } else {
        deleteAllBtn.classList.remove("active");
    }

    let newLiTag = '';
    listArr.forEach((element, index) =>{
        newLiTag += `<li> ${element} <span onclick="deleteTask((${index}))";><i class="fas fa-trash"></i></span></li>`; //Concateno un li a la lista
    });
    todoList.innerHTML = newLiTag;
    inputBox.value = ''; //Reseteo el texto que le pase al To do
}

Up to this point my code works fine, but now i wanted to generate other to do list as i click at a button.

script.js:

const temp = `
<div class="wrapper">
    <header>To do</header>
    <div class="inputField">
        <input type="text" placeholder="Add new item">
        <button><i class="fas fa-plus"></i></button>
    </div>
    <ul class="todoList">
                       
    </ul>
    <div class="footer">
        <span>You have <span class="pendingNumb"></span> items pending</span>
        <button>Clear All</button>
    </div>
</div>
`



//evento del click
//primero agregas el id="newList" al boton
let btn = document.getElementById("newList")

btn.addEventListener("click", () => {
        
    //seleccionas donde lo vas a insertar
    let contenedor = document.getElementById("contenedor")
    contenedor.innerHTML += temp

        

        
})

The issue is that now im allowed to add more to do lists but the functions that i showed before and others that consist on adding and deleting items doesn´t work anymore. As i inspect my code i have the console message: 'Cannot set property 'onkeyup' of null'. I will appreciate any help and solution.