Replies(3)

The dlg variable refers to all the dialog divs, and shows them all when you hover. You need to refer to the following div for each anchor to open the appropriate dialog. However, the dialog divs are removed from their normal position and can't be reached through relative traversals, so you must add matching hrefs/IDs to your anchors/divs:

Line 53 selects both dialogs and initialises them ... that's fine. But that set of 2 dialogs is then assigned to the variable dlg, which you then go on to use within your mouse event handlers. So when you, for example, mouseover either of the anchors, both dialogs are being instructed to open.You need to differentiate between the anchors somehow, so that hovering on the 1st anchor opens the first dialog, and the 2nd anchor the second dialog. As an example only...

$( 'a' ).mouseover( function(){

dlg.eq( $( 'a' ).index(this) ).dialog( 'open' );

});

Of course this relates only to the code extract you provided above, in that it assumes a direct and exclusive relationship between anchors and dialogs (ie. every anchor on the page has a uniquely corresponding dialog, and vice versa)!