Unique ID for cart-popup not to overlap other carts

Make sure you generate a unique ID for each cart element. This can be achieved by appending a unique identifier, such as a timestamp or a random number, to the base ID of the cart element.

Hide Cart Elements by Default: In your CSS, set the cart elements to be hidden by default using the appropriate selector. This will prevent them from being visible when the page loads.

#cart-item-{{uniqueID}} {
  display: none;
}

Show Cart Elements on Click: Add an event listener, such as a click event, to the trigger element (e.g., "View Details" button) that corresponds to each cart item. When the trigger element is clicked, use JavaScript to show the corresponding cart element by modifying its CSS display property.

document.getElementById('trigger-element-{{uniqueID}}').addEventListener('click', function() {
  document.getElementById('cart-item-{{uniqueID}}').style.display = 'block';
});

In this code snippet, 'trigger-element-{{uniqueID}}' represents the ID of the trigger element that, when clicked, will reveal the corresponding cart item with ID 'cart-item-{{uniqueID}}'.

Hi Tulin

I have tried to use the changes as specified, but i am not yet accomplished this very well, let me share my current code from one specific cart popup. 

                
                                    

    

        

            
        
        

            
Colorful Stylish Shirt
            

                
R123.00
R123.00
            
        
        

            View Detail
            Add To Cart
        
    
    
    

        

            ×
            

                
            
            

                
Colorful Stylish Shirt
                

                    
R123.00
R123.00
                
            
            

                Add to Cart
                Close
            
        
    
    


// javascript
$(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 cartId = $(this).attr('id');
    $('#cart-popup-' + cartId).show();
  });

  $('.close-popup-btn').click(function() {
    $(this).closest('.card-popup-container').hide();
  });
});

To make each cart unique and show/hide the cart popup only after clicking the "View Details" or "Add to Cart" buttons, you can modify your HTML and JavaScript code as follows:

1. In the HTML code, add a unique ID to each "Add to Cart" button and a matching ID to the corresponding cart popup container, like this: 

^__i class="fas fa-shopping-cart text-primary mr-1">Add To Cart


  

    ...
  

2. In the JavaScript code, update the click event handlers to show/hide the correct cart popup container based on the ID of the clicked button, like this: 
 

$(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 cartId = $(this).attr('id');
    $('#cart-popup-' + cartId).show();
  });

  $('.close-popup-btn').click(function() {
    $(this).closest('.card-popup-container').hide();
  });
});

With these changes, each "Add to Cart" button and its corresponding cart popup container will have a unique ID, and the JavaScript code will show/hide the correct container when the button is clicked. Additionally, the "Close" button inside each cart popup container will hide the container when clicked.