Tengo una página de Wordpress donde muestro un container > row > col que se replica para cada publicación de blog que tengo. Agregué jQuery y una tarjeta de blog personalizada que, al pasar el mouse, se muestra como se muestra a continuación:

Sin embargo, solo funciona en la primera tarjeta , mientras que en las otras tarjetas no se usa jQuery (no se agrega la clase animada).

Este es mi loop-item.php donde tengo mi plantilla de tarjeta:

 <div class="col-lg-4 col-md-6 mb-5"> <div id="product-card"> <div id="product-front"> <div class="shadow"></div> <img src="<?php the_post_thumbnail(); ?>" /> <div class="image_overlay"></div> <a href="<?php the_permalink(); ?>"> <div id="view_details">Citeste</div> </a> <div class="stats"> <div class="stats-container"> <span class="product_name"><strong><?php the_title(); ?></strong></span> <div class="product-options"> <p> <?php the_content() ?> </p> </div> </div> </div> </div> </div> </div>

Y este es mi archivo jQuery :

 $(document).ready(function(){ // Lift card and show stats on Mouseover $('#product-card').hover(function(){ $(this).addClass('animate'); $('div.carouselNext, div.carouselPrev').addClass('visible'); }, function(){ $(this).removeClass('animate'); $('div.carouselNext, div.carouselPrev').removeClass('visible'); }); });