Magnific-Popup: Get dynamic content from clicked element

Question

I have a row of tiles which contain hidden content. I'm using Magnific-Popup to fetch the content and add to the lightbox, which I seemt be able to do but I keep gettin the contents from all and not from the clicked element.

My question is: How do I get just the content from the clicked element, only?

HTML

<div class="tile">
   <div class="mfp-hide tile-info"><p>One</p></div>
</div>

<div class="tile">
    <div class="mfp-hide tile-info"><p>Two</p></div>
</div>

<div class="tile">
    <div class="mfp-hide tile-info"><p>Three</p></div>
</div>

<div class="tile">
    <div class="mfp-hide tile-info"><p>Four</p></div>
</div>

jQuery

$('.tile').magnificPopup({
    items: {
    src: '.tile-info',
    },
    type: 'inline'
});

Here's the fiddle

http://jsfiddle.net/8csham4u/39/

Answer 1

Figured it out. My answer

$('.tile').on('click', function () {
  var theGoodStuff = $(this).find('.tile-info p')
  $.magnificPopup.open({
      items: {
          src: theGoodStuff,
      },
      type: 'inline'
  });
});

http://jsfiddle.net/2a6a4gvh/1/