Use AJAX to load content to a jQuery UI dialog

On my site, I have a bunch of profile previews that are being generated by running JSON data through a mustache.js template.

Here's the template:

<script id="profile-preview-template" type="text/template"> 
    <div class="col-sm-3">
        <a style="display:block">
            <div class="profile-preview">
                <img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
                <h1>{{first_name}} {{last_name}}</h1>
                <h2 class="text-muted">{{major}}</h2>
                <h3 class="text-muted">Cohort {{cohort}}</h3>
            </div>
        </a>
    </div>
</script> 

The profile preview shows select info from the JSON info like first_name, last_name, etc.

Here's the format of the JSON data:

{
"profiles": [
{
  "first_name": "Robert",
  "last_name": "Hosking",
  "img_url": "img/about/hackbert.jpg",
  "major": "Computer Science",
  "cohort": 12,
  "bio": "some info",
  "linkedin": "some url",
  "home_town": "some place",
  "status": "Student"
},
{
  "first_name": "Jimmy",
  "last_name": "Harval",
  "img_url": "img/about/hackbert.jpg",
  "major": "Chemistry",
  "cohort": 13,
  "bio": "some info",
  "linkedin": "some url",
  "home_town": "some place",
  "status": "Student"
}
]
}

However, when one of the previews is clicked, I'd like to make a jQuery UI dialog modal popup containing all of the info in the JSON data (not just the data displayed in the preview).

My question is how do I get a reference as to which profile preview was clicked so I know where in the JSON file to look to get the rest of the information.

via Chebli Mohamed