Target proper id with jquery

Question

I have buttons and divs(hidden) that are created with php and they look like this:

// while loop start
echo "<img id='epopedit$id' src='img/edit.png' />";

echo "<div id='edialog$id' style='display:none'>
<!-- some data -->
</div>";
// while loop end

How to open corresponding div(edialog) with img(epopedit)? This is code that I have but it opens all divs:

$("[id^=epopedit]").on("click", function(){
   $("[id^=edialog]").dialog(options).dialog("open");
});

Answer 1

Use common classes with data-* attributes to identify the specific elements. Something like this:

echo "<img class='epopedit' data-idp='$idp' src='img/edit.png' />";

echo "<div class='edialog' data-idp='$idp' style='display:none'>
<!-- some data -->
</div>";

$(".epopedit").on("click", function() {
    var $el = $(this);
    $(".edialog").filter(function() {
        return $(this).data('idp') == $el.data('idp');
    }).dialog(options).dialog("open");
});