JQuery ajax call does not hit the controller when clicked the second time -

i trying achieve load more data functionality in mvc project using ajax. have followed approach : https://www.codeproject.com/articles/1043142/implementing-load-more-button-using-asp-net-mvc-an

everything seems fine when click on load more data button first time hits controller brings same data loaded already. when try click on button again not hit controller me debug instead, brings same initial data once again. there's no error in console way. here controller:

public actionresult index() {     var model = new homepageviewmodel       {                        initiallyloadedposts = _postservice.getallposts(new getpostsinput { ispublished = true, returncount = 4 })                     };     return view(model); }       [httppost]     [allowanonymous]     public jsonresult loadmorepost(int size)     {         var model = new loadmorepostsviewmodel { posts = _postservice.getallposts(new getpostsinput { ispublished = true, skipcount = size, returncount = 4 }) };         int modelcount = model.posts.count();         if (model.posts.any())         {             string modelstring = renderrazorviewtostring("_loadmorepost", model);              return json(new { modelstring = modelstring, modelcount = modelcount });         }         return json(model, jsonrequestbehavior.allowget);     }     public string renderrazorviewtostring(string viewname, object model)     {         viewdata.model = model;         using (var sw = new stringwriter())         {             var viewresult = viewengines.engines.findpartialview(controllercontext,                                                                      viewname);             var viewcontext = new viewcontext(controllercontext, viewresult.view,                                          viewdata, tempdata, sw);             viewresult.view.render(viewcontext, sw);             viewresult.viewengine.releaseview(controllercontext, viewresult.view);             return sw.getstringbuilder().tostring();         }     } 

here index html

@foreach (var post in model.loadmoreposts.batch(4))     {         foreach (var subpost in post)         {                         <article class="cb-blog-style-b cb-module-a cb-article cb-article-row-2 cb-article-row cb-img-above-meta clearfix cb-separated @(cssclass) post type-post status-publish format-video has-post-thumbnail hentry category-design">                 // data binding             </article>         }     }     <a id="loadmore" href="#">load more</a>      // string rendered view :     @foreach (var post in model.posts)    {      <article class="cb-blog-style-b cb-module-a cb-article cb-article-row-2 cb-article-row cb-img-above-meta clearfix cb-separated cb-no-2 post-111 post type-post status-publish format-video has-post-thumbnail hentry category-design tag-food tag-health tag-lorem tag-vintage post_format-post-format-video">     // string rendered view.     </article>     } 

here ajax call

(function () { $(function () {     var loadcount = 1;     $("#loadmore").on("click", function (e) {         e.preventdefault();         $.ajax({             url: url.action("loadmorepost", "home"),             data: { size: loadcount * 4 }.serialize(),             cache: false,             type: "post",             success: function (data) {                 if (data.length !== 0) {                     $(data.modelstring).insertbefore("#loadmore").hide().fadein(2000);                 }                 var ajaxmodelcount = data.modelcount - (loadcount * 4);                 if (ajaxmodelcount <= 0) {                     $("#loadmore").hide().fadeout(2000);                 }             },             error: function (xhr, status, error) {                 console.log(xhr.responsetext);                 alert("message : \n" + "an error occurred, more info check js console" + "\n status : \n" + status + " \n error : \n" + error);             }         });         loadcount = loadcount + 1;     }); }); })(); 

any appreciated.