In those for loop, I am assigning a function to a close button that will essentially remove a mark tag from some text.

    for (q = 0; q < json_response.trainer.annotation.length; q++) {
        let close_ = document.getElementById(`cl_${x3}_${q}`);
        console.log(close_)
        close_.onclick = function () {
            delete_ent(this);
        };
    };


function delete_ent($this) {
    let all_text = $this.parentNode.parentNode.innerHTML;
    console.log($this, $this.parentNode);
    let test1 = $this.parentNode.innerHTML;
    let replace_text = test1.split("<span>");
    // console.log(replace_text[0]);
    let updated_text = all_text.replace(`${$this.parentNode.outerHTML}`, `${replace_text[0]}`);
    $this.parentNode.parentNode.innerHTML = updated_text;
}

It works exactly as intended for the first mark tag removed, but then after it's updated the text, the other close buttons stop working.

This is for a chrome extension