title: Half images are shown/added results per page
body: <p>I have a javascript/ajax based search system which calls a file and get json data</p>
  
  <blockquote>
    <p>Sample JSON Data</p>
  </blockquote>
  
  <pre><code>{"id":["33","34","35","36","37","38","39","40","73"],"user_id":["16","16","16","16","16","16","16","16","17"],"name":["Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Amar Nath"],"date":["2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21"],"outlet":["Rani Ka Bagh 1","Rani Ka Bagh 2","Rani Ka Bagh 3","Rani Ka Bagh 4","Rani Ka Bagh 5","Rani Ka Bagh 6","Rani Ka Bagh 7","Rani Ka Bagh 8","Hide Market 1"],"approved":["P","P","P","P","P","P","P","P","P"],"fileName":["409160.jpg","424831.jpg","785371.jpg","27401.jpg","527450.jpg","759700.jpg","540742.jpg","280322.jpg","959879.jpg"],"resultsCount":248,"currentPage":1,"lastPage":28}
  </code></pre>
  
  <p>Above JSON data contain many informaiton and name of images</p>
  
  <p>I am simply parsing json data and adding images in the div</p>
  
  <pre><code>var jsonData = JSON.parse(ajax.responseText);
  var img = document.getElementsByClassName("image");
  for (var i = 0; i &lt; jsonData['id'].length; i++) {
      console.log(i, jsonData['fileName'][i]);
      var imgName = jsonData['fileName'][i].split(",");
      img[i].innerHTML = "&lt;div&gt;&lt;img src='/user_data/" + jsonData["user_id"][i] + "/" + imgName[0] + "' class='image' /&gt;&lt;/div&gt;";
  }
  </code></pre>
  
  <p>What happening is First image is added &amp; displayed next skips third added and displayed next skips so on.</p>
  
  <p>If total search results per page is 10. Only 5 images is displayed</p>
  
  <p>I tried using debugger to find WTH is going on and i found something weird don't no what exactly is happening.</p>
  
  <p>When loop runs and image is added <code>img</code> variable sets to </p>
  
  <p><a href="https://i.stack.imgur.com/zsMkt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zsMkt.png" alt="enter image description here"></a></p>
  
  <p>On next iteration when image is not added <code>img</code> variable is set to</p>
  
  <p><a href="https://i.stack.imgur.com/0Qi9W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Qi9W.png" alt="enter image description here"></a></p>
  
  <p>I have crossed checked all images exist and are loaded properly. Network tab in chrome shows all images are requested and there status is 200</p>