Wywołanie funkcji dopiero po drugim kliknieciu??

Witam.
Proszę o pomoc bo sam sobie nie potrafię poradzić. Problem polega na tym że funkcja wywołuje się dopiero po drugim kliknięciu a nie pierwszym.
Pobieram przycisk za pomocą atrybutu data-id nasłuchując na element rodzica. Przycisk zostaje prawidłowo pobrany ale w momencie gdy wywołuje na nim nasłuchiwanie na klik i przekazuję funkcję która np wyświetla tekst w konsoli to tekst pojawia się dopiero po drugim kliknięciu. Dodam że przyciski w Html mam zamieszczone wewnątrz formularza(choć po za nim jest ten sam problem).
Zamieszam wycinek kodu:

const Structure = function(){
return {
addItem: function(e){
            console.log("działa"); 
        }
     }
} 


const getElementID = function(e){
            id = e.target.dataset.id;
        const btn = document.querySelector(`.btn-add[data-id="${id}"]`);
      
        btn.addEventListener("click",Structure.addItem)
        e.preventDefault();     
    };


    document.querySelector(DOMElements.appContainer).addEventListener("click", getElementID);

Nieco dziwny ten kod. Zdarzenia do przycisków lepiej przypisywać atrybutem onclick lub dynamicznie, lecz nie przez addEventListener tylko tak:

var objMyButton=document.getElementById("mybutton"); //id twojego przycisku
function ButtonClicked(){
 window.alert("Ouch! You clicked me!");
}
objMyButton.onclick="ButtonClicked()";

No tylko oczywiście uruchom ten kod zanim przycisk będzie kliknięty.

Dzięki za cenną uwagę by używać onClick() , przy tak użytym evencie problem znikł choć nadal mnie zastanawia dlaczego w poprzednim przypadku funkcja odpalała się po drugim kliknięciu. Czy ma na to wpływ propagacja zdarzenia?. Jeśli ktoś wie proszę o podpowiedź Problem z pobraniem przycisku jest taki że cały formularz łącznie z przyciskami tworzony jest dopiero po kliknięciu przez użytkownika przycisku "dodaj posiłek" (próbuję stworzyć aplikację dodającą posiłki i liczącą ich kalorie) więc nie mogę pobrać przycisku używając jego klasy bądź id. Ale problem pomogłeś mi rozwiązać .

Problem polega na tym że funkcja wywołuje się dopiero po drugim kliknięciu a nie pierwszym.

Podczas pierwszego kliknięcia uruchamia się funkcja getElementID, która to dopiero ustawia drugi event handler.
Podczas drugiego kliknięcia drugi event handler już został ustawiony (przez uprzednie wywołanie getElementID), zatem uruchamiają się obydwie funkcje.

Nie musisz mi jednak wierzyć na słowo - przekonaj się sam:

const Structure = function() {
    return {
        addItem: function(e){
            console.log('addItem() called'); 
        },
     };
} ;

const getElementID = function(e) {
    console.log('getElementId() called');

    /* ... */
};

Ogólnie to co robisz wydaje się cudaczne - co próbujesz osiągnąć?

Dzięki za wytłumaczenie. Uczę się JS dopiero od 2 miesięcy więc porszę o wyrozumiałość :)
Próbuję stworzyć coś w rodzaju aplikacji gdzie użytkownik klikając przycisk dodaje posiłek. Kod JavaScript tworzy wtedy formularz w kodzie Html. Użytkownik może dodawać poszczególne składniki z ich kalorycznością oraz dodać kolejny posiłek itd.. Coś w tym rodzaju(https://potreningu.pl/calculators/calories).
Wszystkie posiłki wraz z ich składnikami są dodawane do zbiorczego obiektu by docelowo móc je wrzucić do localStorage i były automatycznie ładowane po odpaleniu strony. Uznałem że będzie potrzebny mi jakiś atrybut(w tym wypadku atrybut id który nadałem w kodzie html) by kod "wiedział" w które miejsce w obiekcie dodać składnik wpisany przez użytkownika.