I am trying to develop a full functional Gridview in MVC, data is showing in gridview but I want to edit one row on the same page ie the row should become textboxes when I click edit hyperlink.

here is my html code

```
<table>
    <tr>
        <th>
            @Html.Label("ID") 
        </th>
        <th>
            @Html.Label("Name")
        </th>
        <th>
            @Html.Label("Description")
        </th>
        <th>
             @Html.Label("Date")
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            <input type="text"  class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Id)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Name)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Description)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_date)
        </td>
        <td>
            <a class="edit" href="#">Edit</a> |
           @* @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |*@
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

```

my jQuery

```
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function() {
        $('a.edit').click(function () {
            var dad = $(this).parent().parent();
            dad.find('label').hide();
            dad.find('input[type="text"]').show().focus();
        });

        $('input[type=text]').focusout(function() {
            var dad = $(this).parent();
            $(this).hide();
            dad.find('label').show();
        });
        });
    </script>
}

```

and my css for textboxes

```
.edit-input {
    display:none;
}

```

but when I execute the screen i like this![enter image description here](https://i.stack.imgur.com/d2cMt.png)

I am new to mvc and I don't have much knowledge about it, 
what should I change in jQuery to fix it?