apply function for each component jquery

Question

I have a Wordpress page where I display a bootstrap container > row > col which is replicated for each blog post I have. I added jQuery and customized blog card which on hover displays like shown:

However, it works only on the first card, while on the other cards - jQuery is not used (class animate is not added).

This is my loop-item.php where I have my card template:

<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>

And this is my jQuery file:

    $(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');
    }); 
});