Beginner in Laravel Delete data using modal

My modal works so well and can delete data but not the exact id that i selected to delete like example id: 1, 2, 3, 4 and i will select id: 4 but the id: 4 will not delete the id deleted is id: 1

this is my delete function inside AllSystemController

public function deletestorydata($id)
{
    $story = Story::findOrFail($id);
    $story->delete();
    return redirect()->back()->with('success', 'Data has successfully deleted.');
}

and this is my route web.php in story section

Route::get('stories/table', 'AllSystemController@indexstoriesdata')->name('stories.table');
Route::get('/stories/add', 'AllSystemController@createviewstories')->name('create.stories');
Route::post('/stories/storiesdata/submit', 'AllSystemController@submitstories')->name('submit.stories.data');
Route::get('/stories/view/{id}', 'AllSystemController@showviewstories')->name('view.story.data');
Route::get('/stories/edit/{id}', 'AllSystemController@editviewstories')->name('edit.stories');
Route::patch('/stories/{id}', 'AllSystemController@updatestorydata')->name('update.story.data');
Route::delete('/deletestory/{id}', 'AllSystemController@deletestorydata')->name('delete.story.data');

and this is my view index_stories_data.blade.php

<td>
<div class="dropdown">
  <button class="btn btn-primary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action&nbsp;<i class="fa fa-sort-desc" aria-hidden="true"></i></button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a style="color:black; font-weight: bold;" class="dropdown-item" href="" target="_blank">View</a>
    <a style="color:black; font-weight: bold;" class="dropdown-item" href="" target="_blank" class="btn btn-primary">Edit</a>
    <a style="color:black; font-weight: bold;" class="dropdown-item" data-toggle="modal" data-target="#delete" href="">Delete</a>

  </div>
</div>

this is my modal and script

<div class="modal fade modal-icon" id="delete" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">

<h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
</div>
<form method="post" class="delete_form" action="">
    
    <input type="hidden" name="_method" value="DELETE">
<div class="modal-body">
  <h4 class="text-center">Are you sure you want to delete it?</h4>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-process" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Confirm</button>
</form>

</div>
</div>
</div>
</div>

<script>
  $(document).ready(function(){
    $('.delete_form').on('delete', function(){
      if(confirm("Are you sure you want to delete this data?"))
      {
        return true;
      }
      else
      {
        return false;
      }
    });
  });
</script>

and i tried to dd($story); value, example id: 1, 2, 3, 4, and i will select button to delete is id: 3 and the result in dd is id: 1 is there something wrong to my function? how can i fix this?

via Chebli Mohamed