jQuery $(this).closest show & hide

Question

I've got a table with multiple rows. In each row is a Show Details Button and a Hide Details button. On clicking show details I want the hide details button to only show for the specific row. I thought the .closest() function would work but it hasn't yet.

Here is the HTML

<table>
    <tr id="1">
      <td><button class='view'>View Details</button><button class='hide' style='display:none;'>Hide Details</button></td>
    </tr>

    <tr id="2">
      <td><button class='view'>View Details</button><button class='hide' style='display:none;'>Hide Details</button></td>
    </tr>
</table>

Here is the jQuery

$(".view").click(function() {   
    $("#patient").show("");
    $(this).hide();
    $(this).closest(".hide").show();
});

Answer 1

.closest looks at the current element and its parents only. You'd have to do this like:

$(this).parent().find('.hide');

or

$(this).siblings('.hide');

Answer 2

Are you binding after the dom is ready? Try this:

$(function(){
    $(".view").click(function() {   
        $("#patient").show("");
        $(this).hide().next().show();
    });
});