Добавление элементов на страницу по нажатии на кнопку

Подскажите, пожалуйста, кто сможет.

В общем есть кнопка ".block". При ее нажатии на сайте добавляется <div>, внутри которого есть кнопка ".img". При нажатии на кнопку ".img" в блоке <div>, в котором она находится, нужно добавить картинку. После добавления блока вызывается функция с добавлением картинки, но работает она только 1 раз.

Как реализовать добавление нескольких картинок? Чтобы когда будут добавляться новые блоки, в них тоже все работало

const addBlockBtn = document.querySelector('.block')
const imgArea = document.querySelector('.all-img')
        
addBlockBtn.addEventListener("click", () => {

    imgArea.innerHTML += `
    
        <div class="block">
            <div class="all-img">
                /* Сюда добавляются картинки */ 
            </div>
            <div class="actions">
                <button class="img">Add img</button>
            </div>
        </div>`

    addImg()
})

function addImg(){
    let addImgBtn = document.querySelectorAll('.img')
    addImgBtn.forEach((item) => {
        item.addEventListener('click', () => {
            item.closest('.block').innerHTML += `<img src="">`
        })
    })
}