Why did the first eventlistener stop working when the second one is fired?

Question

Here is my code:

        socket.on("adddiv", id => {
            document.getElementById("box").innerHTML += `<div id="div${id}"><h1>Hi</h1><button id="${id}">Hi</button><br><br></div>`;
            document.getElementById(id).addEventListener("click", () => {
                socket.emit("clicked", "...");
            });
        });

once I fire adddiv twice with different ids, the first that goes to the box element stopped having the eventlistener, and if I press the first button, the clicked wouldn't fire

EDIT: I had to do it the "hard" way by firing the eventlistener again every time I have to fire a new one. But please comment below if you know why this is happening.