Deleting Items from Table - Laravel - php

Question

In my code below, i am displaying a list of students in a table. Now when i delete the last student in the table, it rather deletes the first person. Why is this happening? Could it be i am not looping well to get the id's of each students?
When the delete button is clicked, a modal button pops up and i click on yes to do the deletion like below
PS: Laravel Beginner
Controller
public function index()
{
$students= Student::where('user_id', Auth::user()->id)->get();
return view('students.index',compact('students'));
}
View
<tbody>
#foreach($students as $std)
<tr>
<td>{{$std->name}}</td>
<td>{{$std->phone}}</td>
<td>
<a style="color:#000" href="/student/{{$std->id}}/edit" title="edit" ><i style="font-size:16px" class="fa fa-edit"></i></a>
<a style="color:#000" data-toggle="modal" data-target="#myModal" title="delete" ><i style="font-size:16px" class="fa fa-trash"></i></a>
</td>
</tr>
#endforeach
</tbody>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>Do you wish to delete this student ?</p>
</div>
<div class="modal-footer">
#if(!empty($std))
Yes
<a data-dismiss="modal" class=" modal-action modal-close waves-effect waves-light green white-text btn">No</a>
#else
#endif
</div>
</div>
</div>
</div>
</div>
update
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>Do you wish to delete this student ?</p>
</div>
<div class="modal-footer">
#if(!empty($std))
Yes
<a data-dismiss="modal" class=" modal-action modal-close waves-effect waves-light green white-text btn">No</a>
#else
#endif
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this);
var userId = e.relatedTarget.dataset.uid;
// You can add the url with user ID to link href attribute
$modal.find('.modal-footer a.red-text').attr('href', '/customer/' + userId + '/delete');
})
</script>

Answer 1

In your case, the best practice is to send user ID to Bootstrap modal when you click on delete button.
First, add a data-attribute on your delete button to pass the user ID
<table>
<tbody>
#foreach($students as $std)
<tr>
<td>{{$std->name}}</td>
<td>{{$std->phone}}</td>
<td>
<a style="color:#000" href="/student/{{$std->id}}/edit" title="edit">
<i style="font-size:16px" class="fa fa-edit"></i>
</a>
<a style="color:#000" data-toggle="modal" data-target="#myModal" data-uid="{{$std->id}}" title="delete">
<i style="font-size:16px" class="fa fa-trash"></i>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
Then you need to add a bit of jQuery to retrieve your uid parameter
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this);
var userId = e.relatedTarget.dataset.uid;
// You can add the url with user ID to link href attribute
$modal.find('.modal-footer a.red-text').attr('href', '/student/' + userId + '/delete');
})
So, you're sure the ID used for deletion will be the correct one.
Hope this helps you :)
Update :
I made a simple codepen to illustrate this
Codepen example

Answer 2

You are doing it in a wrong way, you have to assign std->id to each delete anchor and give an id to anchor id="del-anchor" like
<a id='del-anchor' std-id={{$std->id}} style="color:#000" data-toggle="modal" data-target="#myModal" title="delete" ><i style="font-size:16px" class="fa fa-trash"></i></a>
You also need to assign id to modal anchor and change it dynamically.
$(document).on('click', '#del-anchor', function () {
var std-id = $(this).attr('std-id');
var href = "/student/"+std-id+"/delete";
$("your-model-anchor").attr("href",href);
$('#myModal').modal();
}
It will delete the corresponding student, you also need to call $("#myModal").hide when delete successful.