Почему файл JS не связывается с созданным мной динамическим div (у которого есть класс)?

Question

Поскольку у меня есть родительский div, в который я добавляю свои динамически созданные div. Динамически созданный div имеет класс с именем «single-item», который имеет решающее значение, так как он был вызван в моем внешне связанном скрипте пагинации (который не являетсябыть связанным).Я попробовал это, создав статические div, и скрипт внешнего разбиения на страницы работает нормально.Но не в том случае, когда div создаются динамически.

Я генерирую изображения из Ajax, а адреса изображений сохраняются в базах данных.

Поэтому я пробовал много решений, таких как:

1. Я проверил, не вызываю ли я неправильный класс и не связывается ли скрипт должным образом.

2. Я также попытался сделать это статически, создаваяdiv, а затем он работал нормально, и код нумерации страниц работает нормально.

3. Но когда div генерировал динамически, код нумерации страниц прекратил работать.

<script>
      function loadDoc() {
        
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET","product_design", true);
          xhttp.send();
              
          xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
              var data = JSON.parse(xhttp.responseText);
            // document.getElementById("demo").innerHTML=data[0].product_name; 
               Image1 =document.getElementById("poster").innerHTML=  "<img onclick='onClick(this)' class='modal-hover-opacity' src='"+data[0].image_address+"' style=' width:100%; ' />";
               Image2 =document.getElementById("poster1").innerHTML= "<img src='"+data[1].image_address+"' style=' width:100%; ' />";
               Image3 =document.getElementById("poster2").innerHTML= "<img src='"+data[2].image_address+"' style=' width:100%; ' />";
               Image4 =document.getElementById("poster3").innerHTML= "<img src='"+data[3].image_address+"' style=' width:100%; ' />";
               Image5 =document.getElementById("poster4").innerHTML= "<img src='"+data[4].image_address+"' style=' width:100%; ' />";
               Image6 =document.getElementById("poster5").innerHTML= "<img src='"+data[5].image_address+"' style=' width:100%; ' />";
              }
          }
      }
      
      
      
       
      </script>

  <div class="pagecontainer">
    <div class="single-item"> <div id="poster"> </div> </div>
    <div class="single-item"> <div id="poster1"> </div> </div>
    <div class="single-item"> <div id="poster2"> </div> </div>
    <div class="single-item"> <div id="poster3"> </div> </div>
    <div class="single-item"> <div id="poster4"> </div> </div>
    <div class="single-item"> <div id="poster5"> </div> </div>
    <div class="single-item"> <div id="poster6"></div></div>
    </div>
    

Ожидаемые результаты должны показывать код нумерации страниц с изображениями, разделенными на 6 частей на каждой странице, но он не отображается в моем коде, на котором яя создаю div динамически.Это только потому, что мой сценарий не получает класс - отдельный элемент, для которого вызывается разбиение на страницы.

Это код, с помощью которого я генерирую div динамически, но сценарий не запускается в классе ="единый элемент" здесь, на котором вызывается код нумерации страниц.

<script>



function loadDoc() {
    var count=0;
    var gin = 0;
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET","product_design", true);
          xhttp.send();
              
          xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
              var data = JSON.parse(xhttp.responseText);
                 for (index = 0; index < data.length; index++) {
                
                var whole = document.getElementsByClassName("pagecontainer")[0];
                var single = document.createElement("div");
                     single.className = "single-item";
                     single.id = "HI";
                     whole.appendChild(single);
                     
                     var doubles = document.createElement("div");
                     doubles.id = "pos"+index;
                     single.appendChild(doubles);
                     
                
               	
               	
var paru = document.getElementById("pos"+ count);
paru.innerHTML = "<img src='"+data[index].image_address+"' style=' width:100%; ' />";
               
                count=count+1;	
            } 
        }    	
    }      	
}      	

</script>