How to display cards in a 4 column grid?

Question

I am trying to display 4 similar cards in a grid. I am able to create the columns however the card actions only apply to the first one. (On click, an overlay appears with a 'view details' button and a further description about the product).
On hovering over the other 3 cards, nothing happens. Only the first one works.

    <div class="container_grid">
        <div class="row">
            <div class="col-3">
            <div id="product-card" style="margin: 1rem">
                <div id="product-front">
                    <div class="shadow"></div>
                    <img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
                    <div class="image_overlay"></div>
                    <div id="view_details">View details</div>
                    <div class="stats">         
                        <div class="stats-container">
                            <span class="product_price">Ksh.500</span>
                            <span class="product_name">Chocolate Cake</span>    
                            <p>Tasty cake</p>                                            

                            <div class="product-options">
                            <strong>Available in</strong>
                            <span>1kg, 2kg, 3kg, 4kg, 5kg</span>
                            <button class="btn">Add To Cart</button>
                             <!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
                        </div>                       
                        </div>                         
                    </div>
                </div>

            </div>
        </div>
        <div class="col-3">
            <div id="product-card" style="margin: 1rem">
                <div id="product-front">
                    <div class="shadow"></div>
                    <img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
                    <div class="image_overlay"></div>
                    <div id="view_details">View details</div>
                    <div class="stats">         
                        <div class="stats-container">
                            <span class="product_price">Ksh.500</span>
                            <span class="product_name">Chocolate Cake</span>    
                            <p>Tasty cake</p>                                            

                            <div class="product-options">
                            <strong>Available in</strong>
                            <span>1kg, 2kg, 3kg, 4kg, 5kg</span>
                            <button class="btn">Add To Cart</button>
                             <!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
                        </div>                       
                        </div>                         
                    </div>
                </div>

            </div>
            </div>            
        </div>
    </div>

What could be the problem?
Link to the full JFiddle https://jsfiddle.net/5yoerguh/1/

Answer 1

The problem is you use id for div, need change it to class

or use this selector $('.col-3 > div').hover(function(){}

https://jsfiddle.net/viethien/2nesgtLy/1/