Custom Load More

$('body').on('click', '.cb_section_media .load-more > a', function(){
//            console.log('button clicked')
              if( ! loading ) {
                  button.addClass('loading');
                  loading = true;
//                  console.log('begin to load');
                  var data = {
                      action: 'auka_ajax_load_more',
                      page: page,
                      query: auka.query,
                      layout: $('#js-section-details').data('layout'),
                      cols: $('#js-section-details').data('cols')
                  };
                  $.post(auka.url, data, function(res) {
                      if( res.success) {
                          $('.cb_section_media .row .row').append( res.data );

                          if( res.data ) {
                            $('.cb_section_media > .container').append( button );
                          }else{
                            button.remove();
                            $('.cb_section_media > .container').append( '<p class="text-center ">No more posts to display</p>' );
                          }

                          page = page + 1;
                          loading = false;
                          button.removeClass('loading');
//                          console.log(res);
                      } else {
                          // console.log(res);
                      }
                  }).fail(function(xhr, textStatus, e) {
                       console.log(xhr.responseText);
                  });
              }
          });

        }

HTML

<div class="row " id="js-section-details" data-layout="full" data-count="8" data-type="latest" data-cols="2">
Items 1
Items 2
Items 3
Items 4
Items 5
</div>
<p class="text-center load-more">
<a href="javascript:void(0);" class="font-weight-bold">Load more<br><i class="icon-chevron-thin-down"></i></a>
</p>