Load More issue

Questions
1

I have 7 post in the list. it has to show each 3 post when I click the Loadmore. Load More work until reach the 6 post then after it won’t show the remaining one post and freeze after reach the 6 posts

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using ContentModels = Umbraco.Web.PublishedModels;
@{
    Layout = "master.cshtml";

    var site = Model;
    var listing = Model.Descendants("listing").Where(x => x.IsVisible()).OrderByDescending(x => x.CreateDate);

    var skip = 3;

    if (!string.IsNullOrEmpty(Request.QueryString["num_of_listing"]))
    {
        skip = Convert.ToInt32(Request.QueryString["num_of_listing"]);
    }

     
    var stop = listing.Count();

}

@Html.Partial("~/Views/Partials/Shared/Banner.cshtml")

@if (listing.Any())
{


    <section class="listing padding-top-100 padding-bottom-100">
        <div class="container">
            <div class="row">
                <div class="col-12 top-head">
                    @if (site.Value("listingMainTitle") != null)
                    {
                        <h2 class="text-center mb-5 title-underline">@site.Value("listingMainTitle")</h2>
                    }

                    @if (site.Value("listingMainContent") != null)
                    {
                        <p class="width-half text-center mx-auto">@site.Value("listingMainContent")</p>
                    }


                </div>
                @foreach (var item in listing.Take(skip))
                {

                    var listingImage = item.Value<IPublishedContent>("bannerImage");
                    var bannerTitle = item.Value<IPublishedContent>("bannerTitle");
                    <div class="col-md-4 mb-4  text-center">
                        <div class="listing-item">
                            @if (listingImage != null)
                            {
                                <img class="img-fluid mb-4" src="@listingImage.Url" alt="@item.Name" />
                            }
                            <div class="listing-item-content">
                                @if (bannerTitle != null)
                                {
                                    <a href="@item.Url"><h5>@bannerTitle</h5></a>

                                }
                                else
                                {

                                    <a href="@item.Url"><h5>@item.Name</h5></a>
                                }

                                @(Html.Raw(item.Value("bannerContent").ToString().Truncate(100)))
                            </div>
                        </div>

                    </div>
                }

                @if (skip > stop)
                {

                    <div class="post-bottom mx-auto"><h5 class="text-center">You have reached the bottom...!</h5></div>

                }
                else
                {

                    <div class="col-md-12 text-center mt-5">
                        <button class="btn load-more">Load More </button>
                    </div>

                }
            </div>
        </div>

    </section>
    

<script>

        var skip = @skip;
        var count = skip;
        $(".load-more").click(function () {

            debugger;
            skip = skip + count;

            var stop = @listing.Count();
           
            $.ajax({
                        url: '@Model.Url',
                        Type: 'get',
                        data: {
                            num_of_listing: skip,


                        },
                        success: function (html) {
                            var div = $('.listing .container', $(html));
                            $('.listing').html(div);
                        }
                    });
        });
    </script>


}
This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/97043-load-more-issue