Show and Hide TextBoxes depends on Button OnClick in MVC5

Question

Hi,

I have Two text boxes which are hide when it's in a list. After Clicking Edit, I would like to show the text boxes visible.

From the below code when I say the text box "visible" it displays accordingly. But I need to show the text boxes when it's in a edit mode.

Please help me how to visible/show when i click the button.

- show the text boxes after i click the "Edit" button

- hide the text boxes after I click the "save" button.

Thanks for reading and help would be great.

@model IEnumerable<NameList>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
function ShowEdit(par) {
$("#divBDate-" + par).attr("class", "hide");
$("#txtBDate-" + par).attr("class", "visible");
$("#divEDate-" + par).attr("class", "hide");
$("#txtEDate-" + par).attr("class", "visible");
$("#btnEdit-" + par).attr("class", "hide");
$("#btnSave-" + par).attr("class", "visible");
}

function SaveEdit(par) {
$("#divBDate-" + par).attr("class", "visible");
$("#txtBDate-" + par).attr("class", "hide");
$("#divEDate-" + par).attr("class", "visible");
$("#txtEDate-" + par).attr("class", "hide");
$("#btnEdit-" + par).attr("class", "visible");
$("#btnSave-" + par).attr("class", "hide");

var -bDate = $("#txtBDate-" + par).val();
var -dDate = $("#txtEDate-" + par).val();
var url = '@Url.Action("GetUser", "Cust")';
$.post(url, { RoleId: par, userId: -userId, startDate: -startDate },
function (data) {
$("#divResult").html(data);
});
}
</script>



<div id=divResult">
<table class="table">
<tr>
<th>Name</th>
<th>Area</th>
<th>Beginning Date</th>
<th>End Date</th>
</tr>

@foreach (NamesList n in Model)
{
<tr>
<td> @n.Name </td>
<td>@n.Area </td>
<td>
<div id="[email protected]" class="visible">@n.BDate</div>
<input id="[email protected] type=" text" class="hide" [email protected] />
</td>
<td>
<div id="[email protected]" class="visible">@n.EndDate</div>
<input id="[email protected] type=" text" class="hide" [email protected] />
</td>
<td>
<button id="[email protected]" class="visible" onclick="ShowEdit(@n.ID); return false;">Edit</button>
<button id="[email protected]" class="hide" onclick="SaveEdit(@n.ID); return false;">Save</button>
</td>

</tr>
}
</table>
</div>