How to use addEventListener on dynamically added elements inside forEach() [closed]

I have a function with another function inside it. It also has an eventListener for some dynamically added elements.
With the pseudo code below, I get multiple listeners – the same for each element.
How do I do it to get one eventListener – and how do get its context?

If I move the eventListener out of functionA(), how can I reach functionB()?

const functionA = (el) => {
    const items = 1;
    console.log('functionA');

    const functionB = (items) => {
        console.log('functionB');
    }

    document.addEventListener('click', function (e) {
        const $this = e.target;
        console.log($this);
        
        functionB(items);
    });
}

Array.from(document.querySelectorAll('.el')).forEach((el) => {
    functionA(el);
});

<div class="el">El 1</div>
<div class="el">El 2</div>
<div class="el">El 3</div>