I am working on an invoice creator: when a user clicks on a button, it shows down the name and the price (with the total). When I add an event listener that loops through all the buttons with a given class, it works (I selected them by .childNodes property). But when there's new buttons added by .innerHTML, the event listener doesn't work anymore. Is there a method that can loop through new NodeList items and execute the addEventListener method?

Here's how I did it:

const btnContainer = document.getElementById("btn-container") // this is the button container
const serviceBtn = btnContainer.childNodes; // the nodelist buttons (they have a class="service-btn")
for (let i=0; i < serviceBtn.length; i++) { // loops through all the buttons
    serviceBtn[i].addEventListener("click", (event)=> {
        //...the action of the buttons (displaying name, price etc.)
    })
}

This works fine, but when a new button is added...

const addNewBtn = document.getElementById("add-new-btn") // the button that adds new buttons
addNewBtn.addEventListener('click', ()=> {  
    const textInput = document.getElementById("text-input") // IGNORE THIS
    const priceInput = document.getElementById("price-input") // IGNORE THIS
    newButton = `
                 <button class="service-btn">${textInput.value}
                     <span class="btn-price">${priceInput.value}</span> 
                 </button>
    `
    console.log(serviceBtn) 

...I can see that the button is added, the Nodelist has 1 more item (when i log it out into the console), but no button work when I click on any of them (it doesn't show any error or something)

Help please !

Note: i have tried to do it this way in the addNewBtn.addEventListener as well but i still got the same problem (the other buttons work though BUT IT'S ONLY THE NEW ONE THAT DOESN'T):

    let newButton = document.createElement('button')                // <button>
    let span = document.createElement('span')                      // <span>
    let btnText = document.createTextNode(textInput.value + " ")  // <button>textInput.value</button>
    span.append(document.createTextNode(priceInput.value + " ")) // <span>priceInput.value</span
    newButton.setAttribute('class','service-btn')               // <button class="service-btn"...
    span.setAttribute('class','btn-price')                    // <span class="btn-price"...
    newButton.append(btnText, span)                           // <button>...<span>...</span></button>
    btnContainer.appendChild(newButton)                      // append it to the button conatiner