Why is only the last entry in the script removed?

Question

AJAX

Hello.
There is a script that should delete comments under posts, but it only deletes the last comment without reloading. And when I try to delete other comments, the response page is returned to me from the controller

return response()->json([
     'message' => 'deleted...'
]);

It feels like the script picks up only the last comment id, although the script seems to say that when you click on the button with the id deleteComment{{$comment->id}}

Script

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function () {
        $("body").on("click","#deleteComment{{$comment->id}}",function(e){
            e.preventDefault();

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

            $.ajax({
                url: "{{route('deleteComment', ['id' => $user->id, 'postId' => $post->id, 'commentId' => $comment->id])}}",
                type: "DELETE",
                data: {_token: token, id: id},
                success: function() {
                    $("div.commentPost[data-id="+id+"]").remove();
                },
            });
        });
    });

and html

<div id="commentPost">
        @foreach($post->comments as $comment)
            <div class="container allalbums mb-5 mt-3 commentPost" style="margin-bottom: 70px" id="commentPost{{$comment->id}}" >
                <div class="col-12">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="img_avatar " style="background-image: url({{$comment->user_avatar}});"></div>
                            </div>
                            <div class="col-md-10">
                                <p>
                                    <a class="float-left" href="{{route('profile', ['nickname' => $comment->user_name])}}"><strong class="mr-2">{{$comment->user_name }}</strong></a><small class="text-muted">{{$comment->created_at->diffForHumans()}}</small>
                                </p>
                                <div class="clearfix"></div>
                                <p>{{$comment->comment}}</p>

                                @if($comment->user_id == $post->user_id)
                                    <form action="{{route('deleteComment', ['id' => $user->id, 'postId' => $post->id, 'commentId' => $comment->id])}}" method="post" id="deleteComForm{{$comment->id}}">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn  mr-1 delButton" id="deleteComment{{$comment->id}}"></button>
                                        <button type="button" class="btn btn-sm btn-outline-dark ml-1" id="editCommentBtn{{$comment->id}}">edit</button>
                                    </form>
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>