title: YouTube API nextPageToken
body: <p>I'm fairly new to javascript and I'm kinda stuck in using the youTube API. I'm able to get results with the data I need, loop through each of them and display them, but the problem is with the nextPageToken. I can't seem to figure out why after the second search function with the nextPage token, I'm unable to discard the old one thus, I'm getting multiple, duplicate results.</p>
  
  <p>I'm logging the tokens to see and track them and I always get the previous token duplicated</p>
  
  <pre><code>&lt;body&gt;
  
   &lt;div class="youtube-feed container"&gt;
    &lt;script id="template" type=test/template&gt;
      &lt;div class="youtube-item"&gt;
          &lt;a href="{{link}}" class="link"&gt;
              &lt;img src="{{thumb}}" alt=""&gt;
          &lt;/a&gt;
          &lt;div class="info"&gt;
              &lt;h6 class="title"&gt;{{title}}&lt;/h6&gt;
              &lt;p&gt;{{channel}}&lt;/p&gt;
              &lt;p&gt;{{views}}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/script&gt;
  &lt;/div&gt;
  
  &lt;div class="button container"&gt;
   &lt;a href="#" id="next"&gt;Next Page&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
   (function() {
      var query = 'Random search string',
          apiKey = 'api key here';
  
      getData();
  
      function getData() {
          $.get('https://www.googleapis.com/youtube/v3/search', {
              part: 'snippet, id',
              q: query,
              type: 'video',
              maxResults: 10,
              key: apiKey},
          function(data) {
              var nextToken = data.nextPageToken;
              $.each(data.items, function(i, item) {
                  var resultsData = {
                      id: item.id.videoId,
                      title: item.snippet.title,
                      desc: item.snippet.description,
                      thumb: item.snippet.thumbnails.medium.url,
                      channel: item.snippet.channelTitle
                  };
  
                  $.get('https://www.googleapis.com/youtube/v3/videos', {
                      part: 'statistics',
                      id: resultsData.id,
                      key: apiKey},
                  function(data) {
                      $.each(data.items, function(i, item) {
                          var views = item.statistics.viewCount;
                              resultsData.viewCount = views;
                      });
                      renderData(resultsData);
                  });
              });
              nextButton(nextToken);
          });
      };
  
      function renderData(obj) {
          var template = $.trim($('#template').html()),
              dataVals = template.replace(/{{id}}/ig, obj.id)
                                  .replace(/{{title}}/ig, obj.title)
                                  .replace(/{{thumb}}/ig, obj.thumb)
                                  .replace(/{{channel}}/ig, obj.channel)
                                  .replace(/{{views}}/ig, obj.viewCount)
                                  .replace(/{{link}}/ig, 'https://www.youtube/com/embed/' + obj.id);
          $(dataVals).appendTo('.youtube-feed');
      };
  
      function nextButton(token) {
          $('#next').on('click', function(e) {
              e.preventDefault();
              nextPage(token);
          });
      };
  
      function nextPage(token) {
          $.get('https://www.googleapis.com/youtube/v3/search', {
              part: 'snippet, id',
              q: query,
              type: 'video',
              maxResults: 2,
              pageToken: token,
              key: apiKey},
          function(data) {
              var nextToken = data.nextPageToken;
              $.each(data.items, function(i, item) {
                  var resultsData = {
                      id: item.id.videoId,
                      title: item.snippet.title,
                      desc: item.snippet.description,
                      thumb: item.snippet.thumbnails.medium.url,
                      channel: item.snippet.channelTitle
                  };
  
                  $.get('https://www.googleapis.com/youtube/v3/videos', {
                      part: 'statistics',
                      id: resultsData.id,
                      key: apiKey},
                  function(data) {
                      $.each(data.items, function(i, item) {
                          var views = item.statistics.viewCount;
                          resultsData.viewCount = views;
                      });
                      renderData(resultsData);
                  });
              });
              nextButton(nextToken);
              console.log(nextToken);
          });
      };
   })();
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>