How to make a popup open for an individual slide rather than all of them at the same time on click?

Using php I have created several popups, that I want to appear once the button of any slide is clicked. The modal (simplified) looks something like this

@foreach($products as $key => $product)
            <div class="popup">
              <div>content</div>
            </div>
@endforeach

After that there are the different product slides generated

@foreach($products as $key => $product)
            <div class="item">
              <div>content</div>
<span class="Open">Button</span>
            </div>
@endforeach

After this I run a simple script that on button click displays the modal

$(document).on ('click','.Open', function () {
            $('.popup').removeClass('display-none').addClass('d-flex').hide().fadeIn();
        });

This part works, and on click the modal appears, however, my issue is that all of the modals appear at the same time. Is there a way to make it so that only the modal that is tied to a specific product appears when its button is clicked, rather than all of them?

Thanks a lot!

Answer

FIrst need to create link between popup and button as follows

@foreach($products as $key => $product)
            <div class="popup" id="popup{{$key}}">
              <div>content</div>
            </div>
@endforeach


@foreach($products as $key => $product)
            <div class="item">
              <div>content</div>
<span class="Open" data-id="{{$key}}">Button</span>
            </div>
@endforeach

and now you can have link to button and popup

$(document).on ('click','.Open', function () {
var $el = $(this);

$('#popup'+$el.data('id')).removeClass('display-none').addClass('d-flex').hide().fadeIn();
        });

Hope this will help