class laço repetição Class sendo adicionada em apenas um elemento do laço de repetição (PHP)

[Caio_Lourençon 0]

Caros programadores! Entendo muito pouco de Javascript / jquery, meu forte mesmo é Php e Css, é o seguinte, estou desenvolvendo um sistema há um tempinho e nele estava implementando a LAZY LOAD, aquela famosa técnica de carregamento de imagens que só são carregadas quando o usuário rola a página até onde elas estão, optei pela API Intersection Observer, só que algumas versões do IE não a suportam, pensando nisso decidi criar uma verificação para aparecer uma mensagem caso o navegador não suporte, até aqui tudo bem consegui com o seguinte código abaixo:

 

if ("IntersectionObserver" in window === false){
    $("#image-load").append("<p class='p_um no-img'>Seu navegador não suporta a API, atualize a versão ou tente acessar com outro. </p>")

;}

 

Este código acima cria uma nova Div dentro do container #image-load com a mensagem que queria, (este container #image-load está em um laço de repetição cada imagens que tenho no WHILE também saem com esse container) o problema é que as minhas imagens estão em um Laço de repetição no PHP e o código está apenas funcionando no primeiro elemento do WHILE, quebrei a cabeça e não consegui nada além! Segue abaixo a maneira que está sendo impressa o while no HTML!

 

 

<div class="cover-det" id="image-load">

     <img data-src="img-1.jpg">

     <p class='p_um no-img'>

              Seu navegador não suporta a API, atualize a versão ou tente acessar com outro.

     </p>

</div>

 

<div class="cover-det" id="image-load">

<img data-src="img-2.jpg">

</div>

 

<div class="cover-det" id="image-load">

<img data-src="img-3.jpg">

</div>

 

e assim vai...

 

 

 

a minha pergunta é a seguinte: Como fazer essa mensagem ser reproduzida em todas as imagens desse meu while no PHP?

 

AGRADEÇO A COLABORAÇÃO DE TODOS.