dialog with different possible forms

by Akram kamal

HTML

<div class="dialog">Naam
    <br>
    <p>
        <form method="post" id="naam">
            <input type="text" value="<?php echo $row['voornaam'];?>" name="voornaam" size="8" />
            <input type="text" value="<?php echo $row['achternaam'];?>" name="achternaam" size="8" />&nbsp;
            <input type="submit" value="opslaan">
        </form>
</div>
<button class="opener" border="0" color="white">
    <?php echo $row[ 'voornaam'] . " " . $row[ 'achternaam'] ;?>&nbsp;
    <img src="edit.png" width="10" height="10">
</button>
<div class="dialog">Naam
    <br>
    <p>
        <form method="post" id="naam">
            <input type="text" value="<?php echo $row['voornaam'];?>" name="voornaam" size="8" />
            <input type="text" value="<?php echo $row['achternaam'];?>" name="achternaam" size="8" />&nbsp;
            <input type="submit" value="opslaan">
        </form>
</div>
<button class="opener" border="0" color="white">
    <?php echo $row[ 'voornaam'] . " " . $row[ 'achternaam'] ;?>&nbsp;
    <img src="edit.png" width="10" height="10">
</button>
<div class="dialog">Naam
    <br>
    <p>
        <form method="post" id="naam">
            <input type="text" value="<?php echo $row['voornaam'];?>" name="voornaam" size="8" />
            <input type="text" value="<?php echo $row['achternaam'];?>" name="achternaam" size="8" />&nbsp;
            <input type="submit" value="opslaan">
        </form>
</div>
<button class="opener" border="0" color="white">
    <?php echo $row[ 'voornaam'] . " " . $row[ 'achternaam'] ;?>&nbsp;
    <img src="edit.png" width="10" height="10">
</button>

JavaScript

$(".dialog").dialog({
    autoOpen: false,
    width: 260,
    height: 85
});

$(".opener").click(function () {
    var index = $(".opener").index(this)
    $(".dialog").eq(index).dialog("option", "position", {
        my: 'left, top',
        at: 'right, top',
        of: this
    }).dialog("open");
});