Creating a unique card-popup so it wont affect other card-body

See more:

Javascript

HTML5

Hi Team

I need some help, basically i have 9 different card, i have done 1 so far but i notice before page is reloaded its popup without being clicked, its wrong it must hide. Then when clicked for view-details it should popup only that cart, same applies with others because now it appears before page being refreshed and affects other carts. I have tried to have a unique ID for both. The problem is they display before being clicked. Help me to improve my logic better.

What I have tried:

                                    <div class="col-lg-4 col-md-6 col-sm-12 pb-1">
    <div class="card product-item border-0 mb-4">
        <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
            <img class="img-fluid w-100" src="img/product-1.jpg" alt="">
        </div>
        <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
            <h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
            <div class="d-flex justify-content-center">
                <h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between bg-light border">
            <a href="#" class="btn btn-sm text-dark p-0 view-details-btn">class="fas fa-eye text-primary mr-1">View Detail</a>
            <a href="#" class="btn btn-sm text-dark p-0 add-to-cart-btn">^__i class="fas fa-shopping-cart text-primary mr-1">Add To Cart</a>
        </div>
    </div>
    <!--View item details-->
    <div class="card-popup-container">
        <div class="card-popup" id="popup-0">
            <button class="close-popup-btn">×</button>
            <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                <img class="img-fluid w-100" src="img/product-1.jpg" alt="">
            </div>
            <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                <h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
                <div class="d-flex justify-content-center">
                    <h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="#" class="btn btn-primary add-to-cart-btn">Add to Cart</a>
                <button class="close-popup-btn btn btn-secondary">Close</button>
            </div>
        </div>
    </div>
    <!---View details ends here-->
</div>

$(document).ready(function() {
    $('.view-details-btn').click(function() {
        var popupId = $(this).closest('.product-item').find('.card-popup').attr('id');
        $('#' + popupId).show();
    });

    $('.add-to-cart-btn').click(function() {
        var popupId = $(this).closest('.product-item').find('.card-popup').attr('id');
        $('#' + popupId).find('.add-to-cart-btn').text('Added to Cart');
    });

    $('.close-popup-btn').click(function() {
        var popupId = $(this).closest('.card-popup').attr('id');
        $('#' + popupId).hide();
    });
});