Create jQuery ui dialog box for each row in a table

After looking at your code a bit more I think I can see what you are trying to do. Working JSFiddle, with some faked searchResults so we can see it in action.

There are a few problems with the code in your question:

• Using selectors like $('#patientFileDialog[i]') and $'#openPFDialog[i]') will try to match elements on the page with those IDs. AFAICT those don't actually exist yet, you are trying to create them.

• var dialog[i] = ... sets up some divs as strings, but those are never added to the page;

• As I mentioned in my comment, there are some syntax errors, maybe just typos and mixed up formatting here on SO;

Here's an updated version of the code. Notable changes:

• Instead of adding an event handler for every individual openPFDialog button, it is better practice to add just one which matches them all. That single handler can then work out which button was clicked, and take the right action for just that one, not all of them. In this case if you have all your buttons use IDs that match openPFDialog-X, where X is a number, you can target anything matching that pattern (using a starts with selector, and find the X by removing the openPFDialog- part with replace.

• There's an added complication with the above though. Selectors parsed at page load will only match elements that exist at that time. In this case, you're adding new elements to the page, and a selector defined at page load won't match them. The solution is to select instead some parent element which does exist at page load, and filter. This is called event delegation (search for the paragraph starting with "Delegated event handlers").

• Working from what you have, I am guessing the patientFileDialogs you create should be placed inside some parent element which is not displayed on the page? That's what I've done.

Here's the code (and working JSFiddle):

var dialog, i;

// Single click handler for anything that starts with "openPFDialog-".
// Since those elements don't exist on the page yet, we need to instead
// select a parent object, say the body, and filter for clicks on our
// elements starting with our pattern
$('body').on('click', '[id^=openPFDialog]', function() {
    // We need to find the "i"
    i = $(this).attr('id').replace(/openPFDialog-/,'');
    console.log('clicked on id', i);
    $('#patientFileDialog-' + i).dialog();
});

for (var i = 0; i < searchResults.length; i++) {    
    // Create a new div with ID like "patientFileDialog-1", using the current
    // search result
    dialog = $('<div id="patientFileDialog-' + i + '" title="Patient File">' + searchResults[i].patientWebLink + '</div>');

    // Add it to the page.  I've use a div with ID dialogs which is hidden
    $('#dialogs').append(dialog);

    $('table').append('<tr>'+
        '<td><button id="openPFDialog-' + i + '">Click Here</button></td>' +
        '<td>' + searchResults[i].patientFirstName + '</td>' +
        '<td>' + searchResults[i].patientLastName + '</td>' +
        '<td>' + searchResults[i].patientDateOfBirth + '</td>' +
        '<td>' + searchResults[i].patientDataPulseID + '</td>' +
        '<td>' + searchResults[i].patientLaserFicheID + '</td>' +
        '</tr>');
}

Update

One last suggestion - manipulating the DOM by adding/removing elements is slow. If you need to do that for each element in an array, it is best to avoid actually adding your content on each iteration, and rather just build up a string. Then once you're done iterating, just add the big single string, so you're chaning the DOM just once. Here's the basic changes needed to do that:

// Add some new variables to hold our big strings
var dialog, dialogs, row, rows, i;

// ... your code ...

for (var i = 0; i < searchResults.length; i++) {

    // Create the dialog ...
    dialog = ...

    // Append it to our big string of all dialogs
    dialogs += dialog;

    // Same approach for rows
    row = '<tr>'+ ... all that stuff
    rows += row;
}

// Finished iterating, nothing added to DOM yet.  Do it all at once::
$('#dialogs').append(dialogs);
$('table').append(rows);

Consider the following code.

function showPatientDialog(cnt){
  $("#patient-file-dialog").html(cnt).dialog("open");
}

var d = $("<div>", {
  id: "patient-file-dialog",
  title: "Patient File"
})
  .appendTo("body")
  .dialog({
    autoOpen: false
  });
$.each(searchResults, function(i, result) {
  var row = $("<tr>").appendTo(body);
  $("<td>").appendTo(row).html($("<button>", {
    id: "open-pdf-dialog-" + i
  }).click(function() {
    showPatientDialog(result.patientWebLink);
  }));
  $("<td>").appendTo(row).html(result.patientFirstName);
  $("<td>").appendTo(row).html(result.patientLastName);
  $("<td>").appendTo(row).html(result.patientDateOfBirth);
  $("<td>").appendTo(row).html(result.patientDataPulseID);
  $("<td>").appendTo(row).html(result.patientLaserFicheID);
});