JSFiddle - React, Tailwind, and code Playground

HTML

<section class="body-section">
   <section class="page">
      <section class="page-content">
         <section class="page-content-leftcol">
            <article class="content-article">
               <div></div>
               <div></div>
               <div></div>
               <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus sapien quis facilisis faucibus. Cras tristique finibus gravida. Fusce dolor lacus, ultrices non mi vitae, cursus sagittis dui. Fusce sit amet imperdiet elit. Aenean interdum nibh at tempus maximus. In vestibulum justo sollicitudin massa iaculis, eu eleifend ex gravida. Duis nibh eros, iaculis non laoreet vitae, lobortis vel diam. Maecenas mattis nisl vitae massa elementum, aliquet pharetra quam aliquet. Donec sit amet imperdiet libero. Aliquam at efficitur ex. Nunc iaculis, nibh et ornare fermentum, leo ligula blandit quam, id iaculis nunc nisl sit amet ante. Mauris finibus elit gravida, lacinia leo sed, lacinia nunc. Quisque a erat ultricies, iaculis risus eget, suscipit leo. Etiam sodales massa et dictum lobortis. Praesent sed blandit purus, ut blandit nisl.</p></div>
               <div id="taboola"></div>
               <div class="comment-part"></div>
               </article>
         </section>
      </section>
   </section>
</section>  
<section class="body-section">
   <section class="page">
      <section class="page-content">
         <section class="page-content-leftcol">
            <article class="content-article">
               <div></div>
               <div></div>
               <div></div>
               <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus sapien quis facilisis faucibus. Cras tristique finibus gravida. Fusce dolor lacus, ultrices non mi vitae, cursus sagittis dui. Fusce sit amet imperdiet elit. Aenean interdum nibh at tempus maximus. In vestibulum justo sollicitudin massa iaculis, eu eleifend ex gravida. Duis nibh eros, iaculis non laoreet vitae,...

CSS

#taboola{
  width: 100px;
  height:100px;
  margin-bottom:10px;
  background:red;
}

p{
  width:400px;
}

JavaScript

(function(){
  document.addEventListener("scroll", function(){
    var a = document.querySelectorAll(".comment-part");
  
    if(a.length){
	    for (var item of a){
			if (item.querySelector("#taboola") === null ){
			  item.insertAdjacentHTML('beforeend', '<div id="taboola"></div>');
			console.log(item);
			}
	    }
	}
  });
  
  setTimeout(function(){
    var c = document.createElement("div");
    c.className = "comment-part";
    c.innerHTML = "<article><p>Hello everybody, add me a new red square above me !</p></article>";
    document.body.appendChild(c);
  }, 3000);
})();