Getting the same page in my comment section when going next

I've created a comment section that has laravel's pagination. What I'm trying to do is use jquery so that I don't have to reload the page and the url stays the same. I've almost got it to work the problem I'm having is that I get a copy of my page in the comments section. I kind of have an idea of why it is happening but I'm not sure on how I should fix it.

What I think is happening is that when I click next it takes all the information of the page from my var url = $(this).attr('href'); and reloads it into the comments section.

What I would like to know is how do I change it so that only the comments section is shown and not the whole page.

My OpenController.php

    public function slug(Request $request, $slug){
        $menus_child = Menu::where('menu_id', 0)->with('menusP')->get();
        $stories = Story::where('slug', $slug)->get();

        $slug = $slug;
        
        $story = Story::with('author')->where('slug', $slug)->first();

        $name = $story->author->first()->name;
        $surname = $story->author->first()->surname;
        
        $story = Story::where('slug', $slug)->first();
        $comments = $story->comment()->paginate(2);

        $pdf = Story::all();

        return view('open::public.single-story', compact('menus_child', 'gh', 'object', 'pdf1', 'pdf_sigh', 'load', 'stories', 'slug', 'test', 'name', 'surname', 'comments'));
    }

My single-story.blade.php

@extends('templates::layouts.public')
@section('content')

    @foreach($stories as $story)
        <h1>{!! $story->title !!}</h1>
    @endforeach

    <h5>{!! $name !!} {!! $surname !!}</h5>

    @foreach($stories as $story)
        <p>{!! $story->content !!}</p>
    
        <?php
            $image = getImagesArray($story->image);
        ?>

        @if(!empty($image))
            @foreach($image as $f)
                <iframe src="{!! URL::to('authors_image/'.$f) !!}" width="100%" height="600"></iframe>
            @endforeach
        @endif
    @endforeach

    <hr>

    <div class="row">
        <div class="col-lg-12">
            <div class="comment_form">
                {!! Form::open(array('url' => '/stories/'.$slug, 'id' => 'comment_form')) !!}
                    <input type="hidden" name="story_id" id="story_id" value={!! $story->id !!}>
                    
                    <div class="form_group">
                        {!! Form::label('name', 'Name') !!}
                        {!! Form::text('name', '' , array("class" => "form-control")) !!}
                    </div>

                    <div class="form_group">
                        {!! Form::label('comment', 'Comment') !!}
                        {!! Form::textarea('comment', '' , array("class" => "form-control")) !!}
                    </div>

                    <div class="form_group submit_button">
                        {!! Form::submit('Submit', array("class" =>"btn btn-info submit", "role" => "button")) !!}
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <hr>
    
    <div class="row">
        <div class="col lg-12">
            <div class="comments endless-pagination" data-next-page="{!! $comments->nextPageUrl() !!}">
                @foreach($comments as $t)
                    <h1>{!! $t['name'] !!}</h1>
                    <p>{!! $t['comment'] !!}</p>
                    <hr>
                @endforeach
                
                {!! $comments->render() !!}
            </div>
        </div>
    </div>

@stop

and my main.js

$(document).ready(function(){

    /* LOAD MORE BUTTON */

    $('body').on('click', '.pagination a', function(e){
 
        e.preventDefault();
        var url = $(this).attr('href');
 
        $.get(url, function(data){
            $('.comments').html(data);
        });
 
    });
});