function createTimer(countdownObject) {

    let id = countdownObject.Id
    let removeClass = "inline remove" //(isRemoveButtonsEnabled && "inline remove") || "inline remove hidden"

    document.getElementById("countdownList").innerHTML +=
        `
    <dt id = "` + id + `" class = "countdown">
    <h2 id = "` + id + `-title" class="title">Example Timer</h2>
    <h3 id = "` + id + `-daysNum" class = "time inline"></h3>
    <h3 id = "` + id + `-daysDesc" class = "time description inline">days</h3>
    <h3 id = "` + id + `-hoursNum" class = "time inline"></h3>
    <h3 id = "` + id + `-hoursDesc" class = "time description inline">hours</h3>
    <h3 id = "` + id + `-minsNum" class = "time inline"></h3>
    <h3 id = "` + id + `-minsDesc" class = "time description inline">minutes</h3>
    <h3 id = "` + id + `-secsNum" class = "time inline"></h3>
    <h3 id = "` + id + `-secsDesc" class = "time description inline">seconds</h3>
    <br>
    <input type="button" value="Delete" id = "` + id + `-remove" class="` + removeClass + `"></button>
    </dt>
    `

    const removeButton = document.getElementById(id + "-remove")

    console.log(removeButton)
    updateTimer(countdownObject)

    removeButton.onclick = function () {
        removeTimer(id)
    }()


}

function removeTimer(id) {
    for (let i = 0; i < countdowns.length; i++) {
        if (countdowns[i].Id == id) {
            countdowns.splice(i, 1)
        }
    }
    document.getElementById(id).remove()
    console.log(countdowns)
    saveCountdowns()
}

I'm trying to create this countdown widget. I'm running this function in a basic for loop and inputting a countdownObject with keys of Name, End and Id. There's a problem that only allows one of the buttons to work at a time (usually the last one created) and I have no idea why. The removeTimer function works perfectly, its just a problem of all the buttons not getting connected to the onclick event.

Visual