What is the correct way to write an Ajax post deletion script?

Question

JavaScript

Hello.
Wrote a small script that deletes entries from the database. The problem is that when you click the delete button, the first record that is in the database is always deleted, and not the one that is needed. In the url, it seems like I am passing a link to the deletion route and id

<script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function () {
            $("body").on("click","#delete",function(e){
                e.preventDefault();

                var id = $(this).attr('data-id');
                var token = $("meta[name='csrf-token']").attr("content");

                $.ajax({
                    url: "{{route('deletePost',['id' => $post->id])}}",
                    type: 'DELETE',
                    data: {_token: token, id: id},
                    success: function (response){
                        $("#deletePost").html(response.message);
                    }
                });
                return false;
            });
        });
    </script>

Route

Route::delete('/id{id}/delete', '[email protected]')->name('deletePost'); //Удал

Method

public function delete($id) {
        $post = Profile::find($id);
        $post->delete();
        return response()->json([
            'message' => 'deleted...'
        ]);
    }

Answer 1

OlegGazmanov , The first thing that comes to mind is that your JS code is not written correctly. Here you click on the entry, if there are many entries on the page, then there cannot be many identical IDs on the page, respectively, all entries must have the .delete class Second point Most likely, for each entry in the cycle in the data-id attribute, you assign a real entry ID , for example: Then in the JS variable var id you save the ID of the post that was clicked, but then:
$("body").on("click","#delete",function(e){
var id = $(this).attr('data-id');
$post->id

url: "{{route('deletePost',['id' => $post->id])}}",

You do not pass the JS ID that you received, but php $post->id, so the question is, do you have a script displayed on the page and also multiplying in a cycle? then this is not correct, here you need to pass the ID of the element that was clicked, respectively, to JS (var id )
Well, here:

success: function (response){
                        $("#deletePost").html(response.message);
                    }

Here you will see info that the post has been deleted, but the entry on the page will remain, so it also needs to be removed on the page remove () through JS, this is the first thing that came to mind, review the script itself
in the url, better form a direct link to deleting an entry (string).