lazyload未定义（...）

I have news-list with 5 news on the screen and when user clicks on Load more button - i need to load 5 more news etc. I have id of the next page gotten from back-end (ex. 2).

But when i click on the button Load more i got an error - lazyload is not defined (…). How to fix this? And i'm not sure about var url = "./" + {{$nextPage}};

Any help is appreciated. Thanks

<a id="button-more" class="button button--blue load-more" onClick="lazyload.load()"> -> here its an error


var lazyload = lazyload || {};
(function($, lazyload){

    var buttonId = "#buttonId",
    loadingId = "#loading-div",
    newsContainer = ".news-list__list";

    lazyload.load = function() {
      var url = "./" + {{$nextPage}};

      $(buttonId).hide();
      $(loadingId).show();

      $.ajax({
        url: url,
        success: function(response) {
          if(!response || response.trim() == "NONE") {
            $(buttonId).fadeOut();
            $(loadingId).text("No more news to load!");
            return;
          }
          appendContests(response);
        },
        error: function(response) {
          $(loadingId).text("Sorry, there was some error with the request. Please refresh the page");
        }
      });
    };

    var appendContests = function(response) {
      $(buttonId).show();
      $(loadingId).hide();

      $(response).appendTo($(newsContainer));
    };

  })(jQuery, lazyload);