Multiple Jquery Dialogs On One Page

I'm using jquery dialog popup. I have multiple div's (dynamically created) that require the pop-up on a single page. My current issue is when I click the .open, all (10) pop-ups a

Solution 1:

This should work (or a variant of it).

$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
  alert($(this).attr("id"));

  $(this).next(".dialog").dialog("open");
  returnfalse;
});

Solution 2:

I feel the need to tell you to just use a class as your click handler

$(".open").click(function(e) {
    e.preventDefault();
    $(this).next(".dialog").dialog("open");
});

There's no need for the ID's if you're not using them.

Solution 3:

If I am reading your code correctly what you are doing is

$('.dialog').dialog('open');

i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines

<divclass="dialog"title="Gives Dialog Title"id='diaOne'><!-- This is display:none in css--><p> Dialog text and stuff</p></div>

and then do

$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.

that should I suspect do the trick