Tengo una página en la que cada usuario puede crear un anuncio mediante php y mysqli. Este se publica en una seccion general donde requiero que al hacer clic en cada anuncio se expanda un popup con mas información de los mismos. Mi problema ocurre ya que con la función que tengo actualmente, únicamente el popup funciona para el anuncio más reciente, es decir que los anteriores anuncios, al hacer clic sobre ellos, no responden a la función. Intenté utilizar diferentes métodos como getElementsByClassName o getElementsByName pero ninguno de ellos valida la función, únicamente lo hace el getElementById pero con este error que se me presenta. Alguna ayuda?
Código html/php donde el usuario hace click
<div class="publishContainer" id="publishPopupOpener">
<div class="publish">
<div class="publishCUser">
<div class="publishCPic">
<img class="profpicpub" src="img/profilepics/<?php echo $use['avatar']?>" alt="Avatar">
</div>
<a href="#" class="publishCTitle">@<?php echo $use['usuario']?></a>
</div>
<div class="publishCInfo">
<?php $date = $lista['fecha']; ?>
<p class="publishCDate">Publicado el <?php echo date('d/m/Y G:i', strtotime($date))?>
<p class="publishCZone">En <?php echo $lista['provincia']?>, <?php echo $lista['localidad']?></p>
</div>
<div class="publishCDisplay">
<div class="publishCOffer">
<p class="publishCQuantity"><?php echo $lista['cantidad']?></p>
<p class="publishCCurrency"><?php echo $lista['moneda']?></p>
</div>
<p class="publishCFee">Fee <?php echo $lista['comision']?>%</p>
</div>
<div class="publishCDetails">
<p class="publishCOperation"><?php echo $lista['operacion']?></p>
<div class="publishCMethod">
<i class="publishCChecked fas fa-check"></i><p class="publishCPayment"><?php echo $lista['metodo']?></p>
</div>
</div>
</div>
</div>
<div class="overlay" id="publishOverlay">
<div class="publishannouncer" id="publishPopup">
<a href="#" id="btn-publish-popup-closer" class="btn-cerrar-popup"><i class="fas fa-times"></i></a>
<h3>Publicar un anuncio</h3>
<h4>Gratis, de inmediato y con la más alta exposición</h4>
</div>
Código Jquery
jQuery('document').ready(function($) {
var publishPopupOpener = document.getElementById('publishPopupOpener'),
publishOverlay = document.getElementById('publishOverlay'),
publishPopup = document.getElementById('publishPopup'),
publishPopupCloser = document.getElementById('btn-publish-popup-closer');
publishPopupOpener.addEventListener('click', function() {
publishOverlay.classList.add('active');
publishPopup.classList.add('active');
});
publishPopupCloser.addEventListener('click', function(e) {
e.preventDefault();
publishOverlay.classList.remove('active');
publishPopup.classList.remove('active');
});
});
$('#id_repetido')
comodocument.getElementById('#id_repetido')
van a encontrar solo un elemento, generalmente el primero y por eso eso es que tu código no funciona; debes acceder por clases y, como ya cargaste la librería jQuery usa sus métodos para obtener elementos y asignar eventos.