Displaying Info Dialog Upon Click Event

I am retrieving data using AJAX requests then parsing the JSON response and dynamically generating the HTML markup. So far I have the following:

function retrievePeople(character) {
$.post('includes/getPeople.php', {char: character}, function(data) {
var count = data.count;
var markup = '';
var countDetails = '';
countDetails = (character == '#') ? count + " Listings Were Found." : count + " Listing(s) Beginning With The Letter '" + character + "'";
if(count == 0) markup = "No results were found.";
else {
markup = '<table class="resultsTable">';
markup += '<tr><td>Click on name to view additional information.</td><td> </td><td>' + countDetails + '</td><tr>';
for(var i = 0; i < count; i++) {
if(i % 2 == 0) {
markup += '<tr class="even">';
markup += '<td>' + data.people[i].FirstName + ' ' + data.people[i].LastName + '</td>';
markup += '<td>' + data.people[i].OccupationName + '</td>';
markup += '<td>' + data.people[i].Phone1 +'</td>';
markup += '</tr>';
} else {
markup += '<tr class="odd">';
markup += '<td>' + data.people[i].FirstName + ' ' + data.people[i].LastName + '</td>';
markup += '<td>' + data.people[i].OccupationName + '</td>';
markup += '<td>' + data.people[i].Phone1 +'</td>';
markup += '</tr>';
}}
markup += '</table>';
}
$("#allPeople").html(markup);
}, "json");}

I want to add the functionality of displaying an info card (which is basically going to be a dialog box) when the user clicks on the name of some person. I'm not sure how I could keep references of each person's data or how to traverse the data.people collection from inside the click handler. Do I need to hold the data inside hidden fields? Or can I send the data.people[i] as an argument of the click handler?