Button stops working after injecting HTML code (vanilla js) [duplicate]

<body>
    <main>
        <div class="main-list">
            <h1 class="main-list__header">My To-Do App</h1>

            <div class="main-list__input">
                <input type="text" class="main-list__INPT">

                <button class="addBTN">
                    <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M25.5 17L2 3L6.5 17L2 31L25.5 17Z" fill="url(#paint0_linear_2_6)" stroke="#F8FFE5"
                            stroke-width="2" />
                        <defs>
                            <linearGradient id="paint0_linear_2_6" x1="1.53796e-08" y1="14" x2="44" y2="13"
                                gradientUnits="userSpaceOnUse">
                                <stop stop-color="#7DDE92" stop-opacity="0.76" />
                                <stop offset="1" stop-color="#F8FFE5" />
                            </linearGradient>
                        </defs>
                    </svg>
                </button>
            </div>
        </div>
    </main>

    <!-- scripts -->
    <script src="./app.js"></script>
</body>

Here’s a preview of the page when no HTML code is injected:

enter image description here

When I click the addBTN it adds a task as it should:
enter image description here

However; after injecting the HTML, the button stops working, the event listener won’t listen anymore.

Here’s the app.js:

let variables = document.documentElement.style
let taskContainer = document.querySelector(".main-list")

let addTaskBTN = document.querySelector(".addBTN")
let userTaskText = document.querySelector(".main-list__task-text")

// add task 
console.log(addTaskBTN);

addTaskBTN.addEventListener("click", e => {
    var userInput = document.querySelector(".main-list__INPT")

    taskContainer.innerHTML += ` <div class="main-list__task">
    <label class="main-list__task-left">
        <span class="main-list__task-text">${userInput.value}</span>
        <input type="checkbox" class="main-list__task-left-checkbox">
        <span class="checkmark"></span>
    </label>
    <div class="main-list__task-right">
        <button class="main-list__task-closeBTN">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line x1="1.58579" y1="24.2419" x2="24.2419" y2="1.58579" stroke="#7DDE92" stroke-width="4"/>
                <line x1="24.2419" y1="24.0703" x2="1.58581" y2="1.41422" stroke="#7DDE92" stroke-width="4"/>
            </svg>  
        </button>  
    </div>
</div>`

    let checkBox = document.querySelector(".main-list__task-left-checkbox")
    let taskDelete = document.querySelector(".main-list__task-closeBTN")


    checkBox.addEventListener("click", e => {
        let isChecked = e.currentTarget.checked
    
        isChecked ? (task.classList.add("task-checked"), variables.setProperty("--task-text", "var(--task-checked-text)")) : (task.classList.remove("task-checked"), variables.setProperty("--task-text", "var(--task-unchecked-text)"))
    })
    
    
    // delete task
    let task = document.querySelector(".main-list__task")

    
    taskDelete.addEventListener("click", e => {
        task.remove()
    })

    console.log(userInput.value);
    console.log("You clicked me");
    
    // document.body.innerHTML += `<script src="./task.js"></script>`
})

I tried to debug the issue and it seems like the injected HTML code is causing the button to break. This might be because the code is being injected to the grandparent container of the button.

For instance if I move the button outside of the “main-list” container; the button works as it should:

enter image description here

Any idea why this happens, does adding HTML to an existing container creates a copy of the original container and replaces it with the original + the new code? Any approach to avoid this kind of issues?