JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://s3.amazonaws.com/dimsemenov-static/dist/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/dimsemenov-static/dist/magnific-popup.css">
<a href="#" class="open-popup-link">1st link</a>
<div class="white-popup mfp-hide">
  <p>First popup content</p>
</div><br>

<a href="#" class="open-popup-link">2nd link</a>
<div class="white-popup mfp-hide">
  <p>Second popup content</p>
</div><br>

<a href="#" class="open-popup-link">3nd link</a>
<div class="white-popup mfp-hide">
  <p>Third popup content</p>
</div>

CSS

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 500px;
  margin: 20px auto;
}

JavaScript

$('.open-popup-link').magnificPopup({
  items: {
      // src: $('.white-popup'), // works but loads all
      src: $(this).next('.white-popup'), // should load the next popup
      type: 'inline'
  }
});