Pass Data from HTML to JQuery/Ajax

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css">


                <a href="/echo/html/" class="btn-1 ajax-popup" data-package="1" style="display: inline-block;">Purchase Now</a>

JavaScript

$('.ajax-popup').mousedown(function(){
  var p = $(this).data('package');
  var q = $(this).parent().find('select').val();
  var r = $(this).parents('.checkout-meta').find('.region-badge').text();    
  $(this).magnificPopup({
      type: 'ajax',
      ajax: {
          settings: {
              data : {
                  region : r,
                  quantity : q,
                  package : p,
              },
              success : function(){
                  $('.mfp-preloader').html('<h3>Purhased!</h3>Region: '+r+'<br>Quantity: '+q+'<br>Package: '+p+'<br><br>Bye! :-)');
                  console.log(r+q+p);
              },
          }
      },
      closeOnContentClick: false,
      closeOnBgClick: false
   });
});