pass a variable from a loop to a modal

here is my problem

Before deleting a record (id), I would like to have a confirmation message.

I use a modal (bootstrap 4) to inform the user.

So I’m trying to pass an id to my modal. Confirmation is done by clicking on the ‘#btnDelete’ button which triggers an ajax. So I only need one id.

1. Twig: I performed a loop on datas to retrieve, among other things, Ids and dates

{% for id, d in datas %}
    <tr>                                 
        <td> {{ d|date("d/m/Y - H:i:s")  }} </td>
        <td> <a  data-toggle="modal" href="#" data-target="#modalConfirmDelete" data-id="{{ id }}" class="open-modal"><img src="foo"/></a></td>
    </tr>
</tr>
{% endfor %}

2. modal

<div class="modal fade" id="modalConfirmDelete" ...>
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal">Cancel</button>
                <button type="button" id="btnDelete">Delete</button>
            </div>
        </div>
    </div>
</div>

3. jquery

$(document).on('click', '.open-modal', function () {
    let id = $(this).data('id');
    $('#btnDelete').on('click', function () {
        console.log(id);
        //ajax
    })
});

4. When I click on multiple ‘.open-modal’ buttons, the modal seems to save the values ​​(ids) clicked.

Therefore, when I click on ‘#btnDelete’ from the modal, the console.log shows me all the clicked ids

I tried to empty the modal when it closed but without success

$('#modalConfirmDelete').on('hidden.bs.modal', function (e) {
    $(this).empty();
})

I don’t know if my approach is on the right track. Thank you for your feedback

If you have a jquery or js approach, I’m interested