Multiple Jquery dialogs on page using same classes.

Question

I have multiple places on my page where I want to open a jquery dialog boxes when a link is clicked. I am using class selectors so in theory I should be able to open each of them. My problem is that with the code I have it will only open the first dialog I click. Why is this???

    //modal help div
    $('.dialogbox').dialog({
                   modal:true,
                   autoOpen: false
                   });
    $(".modalhelp").click(function() {
$('.dialogbox').dialog('open')

});

The html:

<a class="modalhelp" href="javascript:void[0]"><img src="images/information.png" /></a>
<div class="dialogbox" style="display:none" title="Information">Hello</div>

<a class="modalhelp" href="javascript:void[0]"><img src="images/information.png" /></a>
<div class="dialogbox" style="display:none" title="Information">NO HELLO</div>

Answer 1

In your .click() handler you need to reference the one you want relatively, like this:

$(".modalhelp").click(function() {
  $(this).next('.dialogbox').dialog('open');
});

Instead of opening all .dialogbox elements, we're only calling .dialog('open') on the very next sibling <div class="dialogbox"> by using .next(). If there may be elements in-between the clicked anchor and the .dialogbox then then this would change a bit, for example .nextAll('.dialogbox:first').