How to Select Custom line AJAX in Laravel - php

Question

My problem is that when I delete a line we can only do I delete a row and jQuery practice for other lines will not be executed.
<script>
$('#destroy').on('click', function (e) {
e.preventDefault();
var token = $('input[name="_token"]').attr('value');
var id = $('#destroy').data("id");
$.ajax(
{
url: "{{ url('/category') }}" + '/' + id + '/delete',
type: 'post',
dataType: "JSON",
data: {"id": id, '_token': token},
success: function (data) {
alert(data.msg)
}
});
console.log("It failed");
});
</script>
line:
<tr id="destroy_">
<td>
<a id="destroy" data-id="{{$cat->id}}" href="#">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
<td>
<a href="{{action('categoryController#update',[$cat->id])}}">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
</td>
<td>
<a href="{{action('categoryController#show', [$cat->id])}}">
{{$cat->category}}
</a>
</td>
<th class="text-right">{{$cat->id}}</th>
</tr>

Answer 1

Using ID's for actions that are repeated in a table is a bad idea if you don't name them dynamically. Either way I suggest using anything other than an ID, for example a custom data attribute. So use this for your delete links:
<a data-delete data-id="{{$cat->id}}" href="#">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
And in your JS code instead of #destroy you can now use the following selector to match them:
$(document).on('click', '[data-delete]', function (e) {
e.preventDefault();
var token = $('input[name="_token"]').attr('value');
var id = $(this).data("id");
$.ajax(
{
url: "{{ url('/category') }}" + '/' + id + '/delete',
type: 'post',
dataType: "JSON",
data: {"id": id, '_token': token},
success: function (data) {
alert(data.msg)
},
error: function () {
// Also the failed request should be handled here
// not below the ajax call because it's asynchronous
console.log("It failed");
}
});
});