How to loop Sweetalert delete confirm into laravel foreach? - laravel

Question

Into Laravel child blade file, I loop foreach users and then use sweetalert to delete into foreach loop.But this sweetalert is working only top row. This is example code just like my code.
<tbody>
#foreach ($users as $user)
<tr>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>
<div class="menu-item px-3">
<form action="{{ route('user.delete', $user->id) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" id="delete-confirm">Delete</button>
</form>
</div>
</td>
</tr>
#endforeach
const button = document.getElementById('delete-confirm');
button.addEventListener('click', e =>{
e.preventDefault();
Swal.fire({
html: `Are you sure you want to delete?`,
icon: "info",
buttonsStyling: false,
showCancelButton: true,
confirmButtonText: "Delete",
cancelButtonText: 'Cancle',
customClass: {
confirmButton: "btn btn-danger",
cancelButton: 'btn btn-primary'
}
}).then(willDel) => {
if(willDel){
form.submit();
}
}
;
});

Answer 1

how about you trying giving delete button unique id, In HTML, the id attribute should be unique for each element on the page. When multiple elements have the same id, it can cause unexpected behavior and may not work as expected. modify your code to use a class instead of an id for your delete buttons:
<tbody>
#foreach ($users as $user)
<tr>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>
<div class="menu-item px-3">
<form action="{{ route('user.delete', $user->id) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="delete-confirm">Delete</button>
</form>
</div>
</td>
</tr>
#endforeach
</tbody>
You can use Javascript to attach the alert to each button as well
$('.delete-confirm').on('click', function(e) {
e.preventDefault();
let form = $(this).closest('form');
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
form.submit();
}
});
});