Optimisation de mon code

Bonjour à tous !
Je travaille actuellement sur le TP de la todolist en JS du tuto de Grafikart, mon code fonctionne très bien et je souhaite désormais l'optimiser avant de voir la correction histoire d'apprendre le plus possible tout seul et de compléter tout ça par la réponse finale qui est assez différente.

Ce que je veux

Je souhaiterais optimiser les parties répétitives, je vois que je peux optimiser l'event listener en mettant une variable dynamique, mais la partie du 'for of' me pose problème dans l'optimisation. je n'utilise pas de class pour l'instant dans ma structure. Quelles seraient vos solutions ? Pour l'instant je pensais regrouper les éléments répétitifs dans une seule variable dynamicFilter. Merci par avance ! :)

function dynamicFilter(remove1, remove2, add1) {

    add1.classList.add('active')

    remove1.classList.remove('active')
    remove2.classList.remove('active')

}

function activeFilter() {

    const todoClick = document.querySelector('button[data-filter="todo"]')
    const allClick = document.querySelector('button[data-filter="all"]')
    const doneClick = document.querySelector('button[data-filter="done"]')

    //clic sur todo, desactive all et done
    todoClick.addEventListener('click', (e) => {

        dynamicFilter(allClick, doneClick, todoClick)

        const hideAllDone = document.querySelectorAll('li .done')
        for (hideDone of hideAllDone) {
            hideDone.parentNode.classList.add('hidden');
        }

        const hideAllTodo = document.querySelectorAll('li .todo')
        for (hideTodo of hideAllTodo) {
            hideTodo.parentNode.classList.remove('hidden');
        }
    })

    //clic sur done, desactive all et todo
    doneClick.addEventListener('click', (e) => {

        dynamicFilter(allClick, todoClick, doneClick)

        const hideAllTodo = document.querySelectorAll('li .todo')
        for (hideTodo of hideAllTodo) {
            hideTodo.parentNode.classList.add('hidden');
        }

        const hideAllDone = document.querySelectorAll('li .done')
        for (hideDone of hideAllDone) {
            hideDone.parentNode.classList.remove('hidden');
        }

    })

    //clic sur all, affiche tout
    allClick.addEventListener('click', (e) => {
        allClick.classList.add('active')

        todoClick.classList.remove('active')
        doneClick.classList.remove('active')

        const displayAll = document.querySelectorAll('li .todo, li .done')
        for (display of displayAll) {
            display.parentNode.classList.remove('hidden');
        }
    })
}