El siguiente código muestra una confirmación de eliminación emergente para diferentes archivos en una galería y, al confirmar, carga el archivo delete.php para iniciar la eliminación. Todo funciona, pero solo el primer botón en una galería carga la ventana emergente. Quiero usar id="custom-sa-warning<?php echo $i++; ?> , crea id="custom-sa-warning0 , id="custom-sa-warning1 y así sucesivamente. Pero no sé cómo para que funcione con la función javascript.

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 } }); })