usuwanie z listy (to-do-list)

Dlaczego nie działa mi usuwanie? Usuwa mi tylko 1 element który klikne, a reszta sie nie wykonuje?
html:

 <form>
    <input type="text">
    <input type="submit">
 </form>
    <p></p>
    <ul></ul>

js:

const form = document.querySelector('form')
const input = document.querySelector('input')
const btnAdd = document.querySelector('button')
const ul = document.querySelector('ul')
const p = document.querySelector('p')

let tab = [];

handleRemove = (e) => {
    const i = e.target.parentNode.dataset.key;
    tab.splice(i, 1)
    console.log(tab)
    ul.textContent = ''
    ul.innerHTML = tab.map((el, i) => (
        `<li data-key=${i}>${el}<button>Usun</button></li>
        `
    )).join('')

}

handleInput = (event) => {
    event.preventDefault()
    const value = input.value
    if (!value) return
    tab.forEach(el => {
        if (value === el) {
            p.textContent = "było to juz"
            input.value = ''
            return
        } else {
            p.textContent = ''
        }
    })
    tab = [...tab, value]
    ul.textContent = ''
    ul.innerHTML = tab.map((el, i) => (
        `<li data-key=${i}>${el}<button>Usun</button></li>
        `
    )).join('')

    ul.querySelectorAll('button').forEach(el => {
        el.addEventListener('click', handleRemove)
    })
}

form.addEventListener('submit', handleInput)

OK, próbuję zrozumieć te funkcje, ale czy mógłbyś streścić, co one robią?

UPDATE W funkcji handleRemove dodajesz z powrotem elementy listy, ale przyciski są już bez handlera zdarzenia click. Dodaj tam ten sam kod, który dałeś w funkcji handleInput, czyli:

ul.querySelectorAll('button').forEach(el => {
        el.addEventListener('click', handleRemove)
    })

Nie dobrze mi się robi jak widzę taki kod. W jakim to celu?
Jak masz tablice todo'sów to bierzesz index i usuwasz to jednym zapytaniem splice.

no a czym to usunąłem ?