onClick not working when 2 tabs of different HTML are opened at the same time, but when closing one it works

I'm developing an app with JS which uses ServerSentEvents. I have a problem while opening 2 different tabs one with an HTML called "temperatures.html" and the other with "moistures.html" if I click on a button nothing happens but if I close one of them, then all the clicks are executed sequentially. For example, I click 3 times on the temperatures button and 1 click on moistures one and then close moistures the onClick function of temperatures button will be executed 3 times. By the way, if I only have one tab at the same time it works properly. The buttons are generated via JS with a script annotated below the HTML when a server-sent event occurs.

Here are my moistures HTML:

<body>
    <h2>Sensores de humedadd</h2>
    <h4>Sensores guardados:</h4>
    <table class="pf-c-table pf-m-center" role="grid" id="addedTableMoisture">
        <thead>
            <tr role="row">
                <th role="columnheader" scope="col">Id</th>
                <th role="columnheader" scope="col">Nombre</th>
                <th role="columnheader" scope="col">Humedad</th>
                <th role="columnheader" scope="col">Accion</th>
            </tr>
        </thead>
        <tbody role = "rowgroup">

        </tbody>
    </table>
</body>

And this is my Temperature HTML:

<body>
    <h2>Sensores de temperatura</h2>
    <h4>Sensores guardados:</h4>
        <table class="pf-c-table pf-m-center" role="grid" id="addedTable">
            <thead>
            <tr role="row">
                <th role="columnheader" scope="col">Id</th>
                <th role="columnheader" scope="col">Nombre</th>
                <th role="columnheader" scope="col">Temperatura</th>
                <th role="columnheader" scope="col">Accion</th>
            </tr>
            </thead>
            <tbody role = "rowgroup">

            </tbody>
        </table>
</body>

That's the JS on Moisture HTML:

var source_moisture = new EventSource("/moisture");
source_moisture.onmessage = function (event) {
    var myTable = document.getElementById("addedTableMoisture");
    var row = myTable.insertRow();
    var id_cell = row.insertCell(0);
    id_cell.innerHTML="Try";
    var name_cell = row.insertCell(1);
    name_cell.innerHTML="Try";
    var temperature_cell = row.insertCell(2);
    temperature_cell.innerHTML="Try";
    var action_cell = row.insertCell(3);
    let btn = document.createElement("button");
    btn.innerText = "Add";
    btn.onclick = function(){
       alert("Minimal Example");
    }
    action_cell.appendChild(btn);
}

And here is the JS for Temperature HTML

var source_temperature = new EventSource("/temperature");
source_temperature.onmessage = function (event) {
    var myTable = document.getElementById("addedTable");
    var row = myTable.insertRow();
    var id_cell = row.insertCell(0);
    id_cell.innerHTML="Try";
    var name_cell = row.insertCell(1);
    name_cell.innerHTML="Try";
    var temperature_cell = row.insertCell(2);
    temperature_cell.innerHTML="Try";
    var action_cell = row.insertCell(3);
    let btn = document.createElement("button");
    btn.innerText = "Add";
    btn.onclick = function(){
       alert("Minimal Example");
    }
    action_cell.appendChild(btn);
}