Update gallery elements while photos are loaded in ajax

Question

On a page of my site, I am trying to have photos dynamically uploaded to the Magnific PopUp gallery.

Let's say that at the start when the page loads you immediately see 10 photos. Then clicking on one of these photos opens the Magnific PopUp gallery. When I click on the right directional arrow an ajax function starts that dynamically loads more photos within the page. The problem is, however, that when I scroll with the directional arrow in the gallery I only see the first 10 images from the start and those loaded in ajax later on are not shown in the gallery popup.

This is my code at the moment - How can I load other photos dynamically when I click on the right directional arrow and see them immediately when I scroll through the gallery?

$('.contBodyBarSects').magnificPopup({
  delegate: 'a',
  type: 'image',
  tLoading: 'Loading image #%curr%...',
  mainClass: 'mfp-img-mobile',
  gallery: {
    enabled: true,
    navigateByImgClick: true,
    preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
  },
  image: {
    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
    titleSrc: function(item) {
      return item.el.attr('title');
    }
  }
});

function callData(counter) {
  $.ajax({
    type: "post",
    url: "<?php echo JUri::base().'all-products.php'; ?>",
    success: function(response) {
      $(response).find("a.prodGlab" + counter).appendTo('.contBodyBarSects');
    },
    complete: function(response) {
    },
    error: function(result) {
    }
  });
}

function waitForElement(elementPath, callBack) {
  window.setTimeout(function() {
    if ($(elementPath).length) {
      callBack(elementPath, $(elementPath));
    } else {
      waitForElement(elementPath, callBack);
    }
  }, 1000)
}

waitForElement(".mfp-container button.mfp-arrow-right", function() {
  $(".mfp-container button.mfp-arrow-right").on("click", function() {
    for (var i = 0; i <= 1; i++) {
      callData(count);
      count++;
    }

  });
});

<div class="contBodyBarSects">
  <a href="#"><img src="img1.jpg" /></a>
  <a href="#"><img src="img2.jpg" /></a>
  <a href="#"><img src="img3.jpg" /></a>
  <a href="#"><img src="img4.jpg" /></a>
  <a href="#"><img src="img5.jpg" /></a>
  <a href="#"><img src="img6.jpg" /></a>
  <a href="#"><img src="img7.jpg" /></a>
  <a href="#"><img src="img8.jpg" /></a>
  <a href="#"><img src="img9.jpg" /></a>
  <a href="#"><img src="img10.jpg" /></a>
</div>