How can I get an attribute when clicking on a button inside a modal?

My problem is the following: I need to obtain the ID of a credential when clicking on a button, but given the structure I have, I don't know how to deal with the problem.

Controller method that receives the request.

@RequestMapping(value = "/fisicHost/{id}/credentials", method = RequestMethod.GET, produces = APPLICATION_JSON_UTF8_VALUE)
public List<Credential> credentialsByFisicHost(@PathVariable(value = "id") final Long fisicHostId, ModelMap modelMap){
    FisicHost optionalFisicHost = fisicHostDao.findById(fisicHostId);

    if (optionalFisicHost == null) {
        // Responder con 404
    }
    FisicHost fisicHost = optionalFisicHost;
    return fisicHost.getCredentials();
}

HTML:

<!-- Modal -->
<div class="modal fade" id="credentialsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">Credenciales</h5>
            </div>
            <div class="modal-body">
                <table id="credentialsTable">
                    <tr class="row">
                        <th id="modal-user">Usuario</th>
                        <th id="modal-pass">Clave</th>
                        <th id="modal-notes">Notas</th>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

JS:

$(".credentialsButton").click(function(){

    var fisicHostId = $(this).data('fisic-host-id');
    $.get( "/fisicHost/" + fisicHostId + "/credentials", data => {
        console.log(data);

        $('#credentialsTable').empty();

//        var user = document.createElement('th');
//        user.textContent = "USUARIO";

        for (i = 0; i < data.length; ++i) {
            var fisicHost = data[i];

            var new_row = document.createElement('tr');
            new_row.className = "row fisichost";

            var userCol = document.createElement('td');
            userCol.textContent = fisicHost["user"];
            new_row.append(userCol);

            var passwordCol = document.createElement('td');
            passwordCol.textContent = fisicHost["password"];
            new_row.append(passwordCol);

            var notesCol = document.createElement('td');
            notesCol.textContent = fisicHost["notes"];
            new_row.append(notesCol);

            var editButton = document.createElement('button');
            editButton.textContent = "EDITAR"
            new_row.append(editButton);

            var deleteButton = document.createElement('button');
            deleteButton.id = buttonId;
            deleteButton.textContent = "BORRAR"
            new_row.append(deleteButton);

            $("#credentialsTable").append(new_row);

  // ACA ESTA EL TEMA

            $(deleteButton).on('click', () => {
                var credentialId = fisicHost["id"];
                console.log(credentialId);
//            $.post( "/fisicHost/" + credentialId + "/credentials", data => {});
            });
        }

        $('#credentialsModal').modal('show');

    }).fail(function(xhr, status, error) {
        console.error(error);
        alert('No se pudieron cargar las credenciales.');
    });
});

$('#credentialsModal').bind('hide', function () {
   $('#credentialsModal tr.fisichost').remove();
});

When the user clicks on the DELETE button that can be seen in the image of the modal, I want to obtain the ID of that credential to be able to use it in the back-end.

The problem is that whenever I click on the button, it takes the ID of the last loaded credential, you see that it goes through the entire for() and then takes the ID of the last one, when what I want is for it to take the ID of the credential on which the button was clicked. That is, if the delete button of credential two is clicked, I take ID 2, not the last one.

In the console, the data object (which is the credentials) in this case looks like this:

[…]
0: {…}
id: 2
notes: "notas"
password: "pass"
role: "null"
user: "usuario"
__proto__: Object { … }
1: {…}
id: 3
notes: "notasssss"
password: "pass"
role: "null"
user: "usuario"
__proto__: Object { … }
length: 2