How to get each reply id for an ajax request?

I have a thread that shows the post and replies from different users. So in each reply, I should be able to edit my reply after it is posted. Without reloading the page edit my reply, I implement jquery ajax to handle the requests.

thread.show.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="level">
                        <span class="flex"><a href="{{route('profile',$thread->creator->name)}}">{{$thread->creator->name}}</a> posted:
                            {{$thread ->title}}
                        </span>
                        @can('update',$thread)
                        <a href="{{$thread->path()}}/edit" class="btn btn-link">Edit Thread</a>
                        <form action="{{$thread->path()}}" method="POST">
                            @csrf
                            @method('delete')
                            <button class="btn btn-link" type="submit">Delete Thread</button>
                        </form>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                {{$thread->body}}
                </div>
            </div>
            @foreach($replies as $reply)
             @include('threads.reply')
            @endforeach
            <div class="mt-5">
                {{$replies->links()}}
            </div>
          .......................
</div>

@endsection

And it includes threads.reply.blade.php:

<div id="reply-{{$reply->id}}" class="card mt-2">
    <div class="card-header">
      <div class="level">
        <h5 class="flex">
        <a href="{{route('profile',$reply->owner->name)}}">{{$reply->owner->name}}</a> 
            said {{$reply->created_at->diffForHumans()}}....
        </h5>
        
        <form method="POST" action="/replies/{{$reply->id}}/favorites">
          @csrf
          <button class="btn btn-secondary" type="submit" {{$reply->isFavorited() ? 'disabled':''}}>
            {{$reply->favorites_count}} {{Str::plural('Favorite',$reply->favorites_count)}}
          </button>
        </form>
      </div>
    </div>
    <div id="reply-body" class="card-body">
      @include('threads.replies.reply-body')
      <!-- render reply body -->
    </div>
    <div id="reply-form" class="card-body">
      <!--render reply form here from edit.blade.php -->
    </div>
    @can('update',$reply)
      <div id="reply-footer" class="card-footer">
        <div class="row">
          <div class="col-md-1">
            <button type="submit" id="editReply" class="btn btn-primary btn-sm btn-width" >Edit</button>
          </div>
          <div class="offset-md-1 col-md-1">
            <form action="/replies/{{$reply->id}}" method="POST">
              @csrf
              @method('delete')
              <button type="submit" class="btn btn-danger btn-sm btn-width">Delete</button>
            </form>
          </div>
        </div> 
      </div>
    @endcan
  </div>

  <script>

    $(document).ready(function(){
        $('#editReply').click(function(e){
           e.preventDefault();
           console.log({{$reply->id}});
            $.ajax({
                url:"{{route('reply.edit',$reply->id)}}",
                method:'GET',
                data: {
                },
                success:function(response){
                    alert('Success');
                    $('#reply-body').hide();
                    $('#reply-footer').hide();
                    $('#reply-form').html(response).show();
                },
                error:function(error){
                    alert('ERROR');
                }
            });
        });
     });

</script>

So in my ajax request above, I'll fetch the current content of my reply and render a partial edit form in my controller.

RepliesController:

public function edit(Reply $reply){

        return view('threads.replies.edit', compact('reply'))->render();

    }

public function update(Request $request,Reply $reply){

        $this->validate($request, [
            'body' => 'required'
        ]);

        $reply->update([
            'body'=> $request->body
        ]);

        return view('threads.replies.reply-body', compact('reply'))->render();
    }
    

And in my threads.replies.edit:

<form id="edit-form">
    <div class="form-group mt-2">
        <textarea class="form-control" name="body" id="body" rows="5">{{$reply->body}}</textarea>
    </div>
    <button type="submit">Cancel</button>
    <button type="submit" id="updateReply" class="btn btn-dark">Update Reply</button>  
</form>

<script>
     $(document).ready(function(){
        $('#updateReply').click(function(e){
           e.preventDefault();
           $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              });
            $.ajax({
                url:"{{ route('replies.update',$reply->id)}}",
                method:'PUT',
                data: {
                    body: $('#body').val()
                },
                success:function(response){
                    alert('reply updated')
                    console.log(response);
                    $('#reply-footer').show();
                    $('#edit-form').hide();
                    $('#reply-body').html(response).show();
                },
                error:function(error){
                    alert('reply not updated');
                    console.log(error);
                }
            });
        });
     });


</script>

My partial form just for showing the body content of reply-body.blade.php(initially this was in reply.blade.php but I can't figured how to render just the body than a partial blade view):

{{$reply->body}}

I have the update ajax request to update the reply and once successfully update, it will remove the partial edit form that I have created and show the original reply body form with the updated reply content.

Now, while this kinda works and be able to update the body content, although the reply body will be distorted a little with the margin.

Now if I make another reply on the post, trying to edit the first reply will fetch the content of the second reply. In other words, it will always get the reply ID of the second reply if I try to edit the first reply.

Is there any way I could handle this?

Edit:

Just figured I forgot to make each reply have a unique id of it's own. So that solves it although I need to figured out how to render just the partial view after updating.