Instagram APIでの画像読み込みエラーについて

先日こちらにてInstagram APIで取得した画像の読み込みについてご質問しました。

そちらに頂いた回答についてのエラーに関するご質問です。

希望する仕様は下記の通りです。
[1]初期読み込み時10枚表示
[2]「さらに読み込む」ボタンをトリガーに10枚づつ追加表示
[3]最後のグループ表示時に読み込みボタン非表示

頂いた回答のサンプルコードは下記の通りです。

lang
1
2instagram.js
3
4var url = "https://api.instagram.com/v1/tags/cat/media/recent?count=3"
5
6$(initFunc);
7
8function initFunc(){
9  hoge();
10}
11
12function hoge(){
13  $.ajax({
14    url: url,
15    data: { access_token: "your-token" },
16    dataType: "jsonp",
17    error: function(jqXHR, textStatus, errorThrown) {
18      $(".instagram").text(textStatus);
19    },
20    success: function(data, textStatus, jqXHR) {
21      url = data.pagination.next_url;
22      for (var i = 0, length = 10; i < length; i++) {
23        var d = data.data[i];
24        $(".instagram").append(
25        $("<div>").addClass("image").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.thumbnail.url))));
26        }
27
28      }
29  });
30};

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>フォトギャラリー</title>
6</head>
7<body>
8<div class="instagram"></div>
9<script src="http://code.jquery.com/jquery.js"></script>
10<script src="instagram.js"></script>
11<button id="button" onclick="hoge()">さらに読み込む</button>
12</body>
13</html>