Как создать список в приложении todo более одного раза (только javascript)

я перемещаю var liElement = document.createElement('li'); за пределы функции addTodo(), чтобы эта функция работала

 function removeTodo(){
    liElement.remove()
};  

но теперь у меня другая проблема, я не могу добавить более одного todo (li)

const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
var liElement = document.createElement('li');
let placeholderValue = '';

// Этот код предназначен для очистки значения заполнителя

input.addEventListener('focus' , () => {
    placeholderValue = input.placeholder;
    input.placeholder = '';
});

input.addEventListener('blur' , ()=> {
    input.placeholder = placeholderValue;
});

// эта функция предназначена для добавления действий в список

function addTodo(){
    todoList.appendChild(ulElement)
    ulElement.appendChild(liElement);
    liElement.classList.add('liElement')
    liElement.innerHTML = input.value;
};
addBtn.addEventListener('click' , addTodo)
// this function is for remove todo from the list
function removeTodo(){
    liElement.remove()
};
liElement.addEventListener('contextmenu' , (e) => {
    e.preventDefault()
    removeTodo()
});