JavaScript JQuery Why buttons' ID are not being correctly referenced

Hello and thank you for your time.

I have one doubt because I am trying to associate the ID I am reading from the Firebase database to the ID which identifies the button. It is important because of this button leads us to the event's modify page so then the event's ID is the one we use to load its data.

However those buttons' IDs look like they are one position forward let's see:

As you can see button 0 has ID Ejemplo nuevo which is the following row's event and so on.

Events:

Code:

Function's code:

   function insertPlans() {
        setReferences();
        $("#title").html("Planes");
        resetAllData();

        $("#table thead").html("<tr>" +
            "<td>ID</td> <td>Capacidad</td> <td>Fecha</td> <td>Descripción</td> <td>Ubicación</td> " +
            "<td>Título</td> <td>Organizador</td> <td>Precio</td> <td>Prioridad</td><td>Asistentes</td>" +
            "<td>Visibilidad</td></tr>");

        dbRef.child('plans').once('value', function (snap) {
            snap.forEach(function (planID) {
                dbRef.child('plans/' + planID.key.toString()).once('value', function (snap) {
                    var row = "<tr><td><button id='new-button' class='btn btn-primary' onclick='saveEventName(this.id)'>Modificar evento</button>" + planID.key.toString() + "</td>";
                    $("#new-button").attr('id', planID.key.toString());
                    snap.forEach(function (fields) {
                        row += "<td>" + fields.val() + "</td>";
                    });
                    $("#table").find("tbody").append(row + "</tr>");
                });
                $("#table").find("tbody").append("</tr>");
            });
        });
    }

Also if I do a console log as:

It prints the correct IDs:

Could you help me please?