The following code shows a popup delete confirmation for different files in a gallery and on confirm it loads delete.php file to initiate deletion. Everything works, but only the first button in a gallery loads the popup. I want to use id="custom-sa-warning<?php echo $i++; ?> ,it creates id="custom-sa-warning0 , id="custom-sa-warning1 and so on. But I dont know how to make it work with the javascript function.

html:

<button type="button" class="btn btn-primary" id="custom-sa-warning" data-fileId="<?php echo $differentfileids; ?>">Click me</button>

js:

<script>
document.getElementById("custom-sa-warning") && document.getElementById("custom-sa-warning").addEventListener("click", function(event) {
    var el = event.target || event.srcElement;
    var fileId = el.getAttribute('data-fileId');
    Swal.fire({
        html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon><div class="mt-4 pt-2 fs-15 mx-5"><h4>Are you Sure ?</h4><p class="text-muted mx-4 mb-0">Are you Sure You want to Delete this Account ?</p></div></div>',
        showCancelButton: !0,
        confirmButtonClass: "btn btn-primary w-xs me-2 mb-1",
        confirmButtonText: "Yes, Delete It!",
        cancelButtonClass: "btn btn-danger w-xs mb-1",
        buttonsStyling: !1,
        showCloseButton: !0
    }).then((result) => {
    if (result.value) {
     window.location.href = "https://somedimain.com/delete.php?id=" + fileId
    }
  });
})