Add a new div dinamically on scroll(infinite scroll page) and verify if this div exists already

Question

I have a little issue with my script.

I want to add the div #widget-thumbnails but when i scroll this div is adding always and always on t[0] not on an other div where this div does not exist yet.

I don't want to use jQuery for this script.

If you have any idea on the way i can correct that ?

(function(){
  try{
  document.addEventListener("scroll", function(){
    var x = document.getElementsByClassName("page-content-leftcol");
    for(i=0;i < x.length; i++){
      if (x[i].querySelector("#widget-thumbnails") === null){
      var t = document.querySelectorAll(".comment-part"); 
      var widget_id = JSON.parse('{"wid_id":"id_account"}');

     if (t.length && typeof widget_id === "object"){
      t[i].insertAdjacentHTML('beforebegin', '<div id="widget-thumbnails"></div>'); // I think the issue is here or maybe i don't use the good way to verify the var x.
      window._widget = window._widget || [];
      _widget.push({article:'auto'});
      !function (e, f, u) {
        e.async = 1;
        e.src = u;
        f.parentNode.insertBefore(e, f);
      }(document.createElement('script'), 
        document.getElementsByTagName('script')[0], 
        '//cdn.widget.com/libtrc/'+ widget_id['wid_id'] +'/loader.js');
      _widget.push({mode: 'thumbnails-d', container: 'widget-thumbnails', placement: 'Below Article Thumbnails', target_type: 'mix'});  
      _widget.push({flush: true});
     }
    }
  }
  });
  } 
  catch(e){
      console.error("--- Widget : Something Bad Happened", e);
  }
})();

I made this fiddle, a perfect example of my issue: https://jsfiddle.net/to6ygxmb/1/

Thanks a lot the community