Question

I have this Fiddle : http://jsfiddle.net/2nAEZ/3/

the idea is very simple… when the page shows up all elements inside tags are hidden. except “Reply” button.

once “Reply” button clicked, the form appear with “Cancel” button.

but, how to make “Reply” button works on each row? not all forms show up when a Reply button clicked. thank you.

Answer 1

Try this jsFiddle example. I cleaned up your HTML (no dupe IDs) and changed the jQuery to operate on a per-row basis.

jQuery

$("form, .hide").hide();
$(".show").click(function() {
    $(this).parents('tr').find("form,.hide").show();
    $(this).parents('tr').find(".show").hide();
});
$(".hide").click(function() {
    $(this).parents('tr').find("form, .hide").hide();
    $(this).parents('tr').find(".show").show();
});​

HTML

<table><tr>
    <td>12345</td>
    <td>message here<br>
        <form action="" method="post">
        <textarea></textarea>
        <input type="button" value="Send">
        </form></td>
    <td>
        <button class="hide">Cancel</button>
        <button class="show">Reply</button>
    </td>
</tr>
<tr>
    <td>67890</td>
    <td>another message here<br>
        <form action="" method="post">
        <textarea></textarea>
        <input type="button" value="Send">
        </form></td>
    <td>
        <button class="hide">Cancel</button>
        <button class="show">Reply</button>
    </td>
</tr></table>

​