Pass Data from HTML to JQuery/Ajax

Question

I am coding a mini shop and I am struggling with a good solution for my problem. I have implemented a quick checkout which immediately opens once you pressed "Purchase Now" at one of the listed articles. This quick checkout is just a jQuery Popup (Screenshot: http://puu.sh/fcDHt/63ecfd9817.jpg ).

My problem is to find a good solution to pass my Data from the HTML (Selected articleId and quantity to buy) to my Ajax Popup. And from the ajax popup I want to use it later for another ajax request to my pre Payment php file (don't worry my currency/prices/receiver is all specified serversided).

My HTML part of an article:

<div class="portfolio-item-meta">
    <h5><a href="single_project.html">SockMonkee</a></h5>
    <p>Sed in velit a justo imperdiet scelerisque ut id leo. Cras quis tellus tellus, viverra varius est. Nulla sed cursus lorem lipsum dolor augue.</p>
        <div class="checkout-meta">
            <div class="checkout-info">
                <strong>Total:</strong> 30,00€
                <div class="region-badge">euw</div>
            </div>
            <div class="checkout-cta">
                <select name="quantity" id="quantity" style="display: inline-block;">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                </select>

                <a href="checkout.php" class="btn-1 ajax-popup" data-package="1" style="display: inline-block;">Purchase Now</a>
            </div>
            <div class="clearfix"></div>
        </div>
</div>

What I want to pass to my jQuery Popup:

Only the Content of that div (euw)

<div class="region-badge">euw</div>

2. The chosen quantity of my select (name="quantity" and id="quantity")
3. The data-package of my a-href button.

This is how I call my Ajax-Popup:

$('.ajax-popup').magnificPopup({
    type: 'ajax',
    closeOnContentClick: false,
    closeOnBgClick: false
});

How I want to use those passed variables in my checkout.php

$region = ...;
$quantity = ...;
$package = ...;

Answer 1

You could use magnificPopup Ajax options:

$('.ajax-popup').magnificPopup({
    type : 'ajax',
    ajax : {
        settings : {
            data : {
                region   : $('.region-badge').text(),
                quantity : $('#quantity').val(),
                package  : $('.ajax-popup').data('package'),
            }
        }
    },
    closeOnContentClick : false,
    closeOnBgClick      : false
});

EDIT

$('.ajax-popup').mousedown(function(){
  var p = $(this).data('package'),
      q = $(this).parent().find('select').val(),
      r = $(this).parents('.checkout-meta').find('.region-badge').text();    
  $(this).magnificPopup({
      type : 'ajax',
      ajax : {
          settings : {
              data : {
                  region   : r,
                  quantity : q,
                  package  : p,
              }
          }
      },
      closeOnContentClick : false,
      closeOnBgClick      : false
   });
});

JSFiddle

Or just update href attribute of .ajax-popup as you use get method:

$('.ajax-popup').click(function(){
    var p = $(this).data('package'),
        q = $(this).parent().find('select').val(),
        r = $(this).parents('.checkout-meta').find('.region-badge').text();
    $(this).attr('href', 'checkout.php&region='+r+'&quantity='+q+'&package='+p)
})
.magnificPopup({
    type                : 'ajax',
    closeOnContentClick : false,
    closeOnBgClick      : false
});