How to generate a dynamic ID for my Button with PHP and move to JS?

Question

I’m trying to use PHP with Sweet Alert already tried with FIXED ID and it works. I’m trying to do that:

 while ($row = mysqli_fetch_assoc($sql)) {
                            echo '<tr>';
                            echo '<td>' . $row['id_apoio'] . '</td>';
                            echo '<td>' . $row['nome_apoio'] . '</td>';
                            echo '<td>' . $row['email_apoio'] . '</td>';
                            echo '<td>' . $row['tel_apoio'] . '</td>';
                            echo '<td>' . $row['cel_apoio'] . '</td>';
                            echo '<td>' . $row['cargo_apoio'] . '</td>';
                            echo '<td>' . $row['especialidade_apoio'] . '</td>';
                            echo '<td>' . $row['conselho_apoio'] . '</td>';
                            echo '<td><button class="bg-transparent border-0 d-block mx-auto" onclick="location.href=\'cadastro-completo-apoio.php?cadastro='. $row['id_apoio'] .'\'"><i class="fa fa-search"></i><br></td>';
                            echo '<td><button class="bg-transparent border-0 d-block mx-auto" onclick="location.href=\'editar-apoio.php?edita='. $row['id_apoio'] .'\'"><i class="fa fa-edit"></i><br></td>';
                            echo '<td><button class="bg-transparent border-0 d-block mx-auto sweet-alert" id="'.$row['id_apoio'].'"><i class="fa fa-user-times"></i><br></button>';
                        }
                        ?>

JS:

    document.getElementById('<?php $row['id_apoio']?>').onclick = function(){
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "info",
            showCancelButton: true,
            confirmButtonClass: 'btn-primary',
            confirmButtonText: 'Primary!'
        });
    };

the button will serve to confirm the item deletion

Answer 1

You don’t need to use id to get the click. Just pick a class from the button. Add another class to the button, something like deletar, thus leaving the classes:

class="bg-transparent border-0 d-block mx-auto sweet-alert deletar"

Then you will create click events for each button per class .deletar and use the .then Sweetalert to redirect the page by grabbing the id button wants to trigger the event if you confirm:

const del_buts = document.getElementsByClassName("deletar");
for(let b of del_buts){
   b.onclick = function(){
      let id = this.id;
      swal({
         title: "Are you sure?",
         text: "You will not be able to recover this imaginary file!",
         type: "info",
         showCancelButton: true,
         confirmButtonClass: 'btn-primary',
         confirmButtonText: 'Primary!'
      }).then(function(e){
        if(e){
           location.href='deleta-apoio.php?deleta='+id;
        }
      });
   }
}