How to separate two sections of code in html so that they do not interfere with each other?

Question

JavaScript

I have two product cards on my site. Each card has a picture, when you click on it, a modal window opens. But when I add two product cards, the modal doesn't open. How can two sections of code (two cards) be separated so that they do not interact together?

Answer 1

Bring it on

$('.card-img').click(function () {
    $('.modal-bg').toggle(50);
    $('.modal-bask-btn').click(function () {
      $('.modal-bg').hide();
    });
  });

to the mind

$('.card-img').click(function () {
    $('.modal-bg').modal('show');
  });

Answer 2

Make it so that when you click on card-img in functions, open parameters with this