Add ajax load more function using WP API

I’ve solved the problem, I was made a mistake with the variable pull_page that is inside the click event. I’ve moved the variable outside the event and now all works fine. Here is the updated code!

var pull_page = 1;
var jsonFlag = true;

$('#load-more').on('click', function(e){
  e.preventDefault();

  if(jsonFlag){
    pull_page++;

    $.getJSON("/u/wp-json/portfolio/all-posts?page=" + pull_page, function(data){
        if(data.length){
        pull_page++;

        console.log(data.length);

        $.each(data, function(i, item){
          var html="<div class="card">";
          html += '<a href="'+ item.permalink +'">';
          html += '<img class="card-img-top w-100" src="'+ item.featured_img_src +'" id="case-studies" />';
          html += '<div class="overlay"><h4 class="text-center" id="client-name">'+ item.title +'</h4></div>';
          html += '</a>';
          html += '</div>';
          $('body').find('.card-columns')
          .append(html);
        });
      }
      else{
        jsonFlag = false;
      }
    }).done(function(data){
      if(data.length >= 4){
        jsonFlag = true;
      }
      else{
        jsonFlag = false;
      }
    });
    }

  }); // end load more