jquery mobile popup not working (for loop)? - jquery-mobile

Question

I tried to create pop ups using for-loop, but does not work. Why?
http://jsfiddle.net/edgardaraujo/Rud3G/2/
I thank you all for the help.
content html
<div data-role="page" id="page1">
<div data-role="content">
<div id="output"></div>
</div>
<!-- /content -->
</div>
content jquery
var array = new Array();
array[0] = "link-image-1";
array[1] = "link-image-2";
array[2] = "link-image-3";
var len = Object.keys(array).length;
for (i = 0; i < len; i++) {
var popup = array[i];
$('#output').css({'font-weight': 'bold'}).append('<img class="popphoto" src="' + popup + '" alt="photo, test" style="width:30%">');
var arrayPhotos = $('<div data-role="popup" id="' + popup + '" data-overlay-theme="a" data-theme="d" data-corners="false"></div>');
arrayPhotos.append('Close <img class="popphoto" src="' + popup + '" style="max-height:512px;" alt="photo, test">');
}

Answer 1

Upadate
When you create [data-role=popup] dynamically, you need to enhance its markup by using .trigger('create').
Demo
You have a mistake in href of the link to popup. You have used variable popup which holds image links instead of using the count variable i.
href="#popup' + i + '"
Here
$('#output').css({ 'font-weight': 'bold'}).append('<img class="popphoto" src="' + popup + '" alt="photo, test" style="width:30%">');
And
var arrayPhotos = $('<div data-role="popup" id="popup' + i +'" data-overlay-theme="a" data-theme="d" data-corners="false"></div>');