ActionEventListener ("щелчок") не работает после вставки другого элемента

Я пытаюсь динамически добавлять элементы div внутри элемента div filtersSpace и в то же время добавлять прослушиватель событий для каждой кнопки внутри элементов div, но когда я вставляю второй элемент, первый добавленный элемент не работает.

Кто-нибудь может мне помочь ?

case "status":
        filtersSpace.innerHTML +=
            `<div class = "card border-dark mx-2 my-3" style = "width: 23%;">
                <h5 class = "card-header">Status</h5>
                <div class = "card-body">
                    <tr>
                        <select class = "custom-select mr-sm-2" id = "${'statusInput' + statusFilterCounter.toString(10)}">
                            <option selected value = "Solved">Solved</option>
                            <option value = "Open">Open</option>
                            <option value = "Pending">Pending</option>
                        </select>
                    </tr>
                    <tr>
                        <button type = "button" class = "btn btn-dark my-2" style = "width: 100%;"
                        id = "${'statusActionButton' + statusFilterCounter.toString(10)}">
                            Filter
                        </button>
                        <button type = "button" class = "btn btn-outline-dark my-2" style = "width: 100%;"
                        id = "${'statusCancelButton' + statusFilterCounter.toString(10)}">
                            Cancel
                        </button>
                    </tr>
                </div>
            </div>`;
        defineFilter(
            "status",
            document.getElementById("statusInput" + statusFilterCounter.toString(10)),
            document.getElementById("statusActionButton" + statusFilterCounter.toString(10)),
            document.getElementById("statusCancelButton" + statusFilterCounter.toString(10))
        );
        statusFilterCounter += 1;
        statusLink.disabled = true;
        break;

...

function defineFilter(filterType, input, actionButton, cancelButton) {
actionButton.addEventListener("click",
    function () {
        filters.push({filterType : filterType, value : input.value});
        actionButton.disabled = true;
        print();
        getDataFromJSon();
    }
);
cancelButton.addEventListener("click",
    function () {
        var quantity = this.id.charAt(this.id.length - 1);
        var counter = 0;
        for (var i = 0; i < filters.length; i++){
            if (filters[i].filterType == filterType){
                console.info(">>>");
                if (counter == quantity){
                    filters.splice(i, 1);
                    print();
                    getDataFromJSon();
                    break;
                }
                counter += 1;
            }
        }
        actionButton.disabled = false;
    }
);}