How do I select a href variable that is in a while loop?

I have a while loop that select multiple images from a database. I have a link with a href and there is a function when it's clicked, it will open up a video modal box. Right now it's only selecting the first href link no matter which one is selected. How do I make sure it's the proper href rather than only the first one?

PHP: this part works fine.

while ($row = $q->fetch()): 

?>

  <li class="item <?php echo $row['type'];?>"><a href="<?php echo $row['link'];?>" class="test-popup-link">
  <?php if($row['img']) { ?>
  <img src="upload/videoCovers/<?php echo $row['img'];?>" alt="<?php echo $row['title'];?>">
  <?php } 
        else { ?>
  <img src="upload/videoCovers/playBtn.png" alt="<?php echo $row['title'];?>">
  <?php } ?>
  </a>
  </li>

JavaScript:

$(document).ready(function(){   
    var videoLink = $(".test-popup-link").attr("href");

    $('.test-popup-link').magnificPopup({
        items: {
          src: videoLink
        },
        type: 'iframe' // this is default type
    });
});

Solution

I don't know anything about that plugin but, you'll probably want to loop through all the elements with the .test-popup-link class and invoke .magnificPopup(). Consider the following:

$(document).ready(function(){   
    $('.test-popup-link').each(function() {
      $(this).magnificPopup({
          items: {
            src: $(this).attr('href')
          },
          type: 'iframe' // this is default type
      });
    });
});

Edit: After a quick look at the Magnific Popup Documentation, it looks like you can use the following example as well.

[...] Use this method if you are creating a popup from a list of elements in one container. Note that this method does not enable gallery mode, it just reduces the number of click event handlers; each item will be opened as a single popup

html

<div class="parent-container">
  <a href="path-to-image-1.jpg">Open popup 1</a>
  <a href="path-to-image-2.jpg">Open popup 2</a>
  <a href="path-to-image-3.jpg">Open popup 3</a>
</div>

javascript

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

So in your case, you may want to consider targeting the ul parent to your list.