Creating Post Navigation Widget

<!--templates/index.html-->
{% extends "base.html" %}

{% block head %}
{{ super() }}
<script src="/static/scripts/index.js"></script>
<link href="/static/styles/index.css" rel="stylesheet">
{% endblock %}

{% block panel %}
<div id="panel" class="panel region"></div>
<div class="navigation region">
  <img onclick="index.navPrevious()" src="/static/images/left.png" /> 
  <img id="nav-home" onclick="index.navHome()" src="/static/images/home.png" /> 
  <img onclick="index.navNext()" src="/static/images/right.png" />
</div>
{% endblock %}

{% block ad %}
<div class="ad region">
  <img src="/static/images/ad.jpg" />
</div>
<div style="clear: both;"></div>
{% endblock %}

{% block content %}
<div id='content'>
  <div id="channel">
    <div id="screen">
      <div id='kvid-screen' width="100%"></div>
    </div>
    <div id="kdownloadButton"></div>
    <div id="kplaylistPanel"></div>
    <div id="next-page">
      <a class="new-vid" onclick="index.previousPageKD()">&lt;&lt; ៥០​ កំរង​វីដេអូ</a>  
      <a class="new-vid" onclick="index.nextPageKD()">៥០ កំរង​វីដេអូ &gt;&gt;</a>
    </div>
  </div>
</div>
{%  endblock %}

//static/scritps/index.js
class Index{
  constructor(){
    this.pageTokens = [];
    this.apiKey = 'AIzaSyCDMr6toQGyDRFPChRsbQ2sheSQfTQLVqg';
    this.blogId = '3212243556817590089';
    this.maxResult = 5;
    this.label = false;

    this.kplaylistId = false;
    this.ChannelId =  'UC5BMQOsAB8hKUyHu9KI6yig';
    this.yt_nextPageToken = false;
    this.yt_prevPageToken = false;
    this.kclicked = false;
    this.kPlaylistt = [];
    this.kPlaylist = [];
    this.created = false;

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    this.kplayerHeight = 0;
  }

  makeApiCall(){
    $('#nav-home').attr('src', '/static/images/loading.gif');
    gapi.client.load('blogger', 'v3', function(){
      var labels = index.label ? 'labels='+index.label:'';
      var maxResults = index.maxResult ? 'maxResults='+index.maxResult:'';
      var myPageToken = index.pageToken ? 'pageToken='+index.pageToken:'';
      var blogId = index.blogId;
      
      var requestPath = 'https://www.googleapis.com/blogger/v3/blogs/'+blogId+'/posts?'+labels+'&'+maxResults+'&'+myPageToken;
      
      var request = gapi.client.request({
        'path': requestPath ,
      });
      
      request.execute(function(response) {      
  /////////////////////////////////////// 
      index.getPostAPI(response);
  ///////////////////////////////////////
      });
  
    });
  }

  createThumb(postContent){
    var div = document.createElement( 'div' );
    div.innerHTML = postContent;
    var img = div.getElementsByTagName("img");
    
    if(img.length>=1) {
      return img[0].src;
    }
    else{
      return ("/static/images/no-image.png");
    }
  }

  getPostAPI(json){
    this.postUrl = [];
    this.postTitle = [];
    this.postDate = [];
    this.postData = [];
    this.postList = [];
    this.postThumb = [];
    this.postId = [];
    this.video = [];
 
    this.totalPost = json.items.length;
    if(this.next)
      this.pageTokens.push(json.nextPageToken);

    this.postList = json.items;
    this.startIndex = 1;
    for(var i =0; i 1)
      this.pageTokens.pop();
    length = this.pageTokens.length;
    this.pageToken = this.pageTokens[length-2];
    this.next = false;
    this.makeApiCall();
  }
  
  navHome(){
    this.pageToken = false;
    this.pageTokens = [];
    this.next = true;
    this.makeApiCall();
  }

  navNext(){
    var length = this.pageTokens.length;
    this.pageToken = this.pageTokens[length-1];
    this.next = true;
    this.makeApiCall();
  }

  toKhDate(date){
    var dt = new Date(date);
    var d = dt.getDate();
    var m = dt.getMonth()+1;
    var y = dt.getFullYear();
    var khDate = d+'/'+m+'/'+y;
    return khDate;
  }

  listingPosts(){
    var html = '';
    
    for(var v=0; v`;
      html += `
`;
      html += ``;
      html += `
${ index['postTitle'][v] }`;
      html += `${ this.toKhDate(new Date(index['postDate'][v])) }`;
      if(index['video'][v] != -1){
        html += ``;
      }
      html += `
`;
      html += `