Display result is reverted back (JSP and JQuery)

[Yashwant Palkar]

In my JSP i have label and Edit button. once I click on Edit button the label should hide and text box should appear instead of label. As well as Textbox should have value same as Label.I have used JQuery for implementing this. my code is as follows

<Script>
		
$(document).ready(function() {
		$("#edit_phone").click(function ()
				
				{ 
			alert("Test");
			
			
				$("#mphonenum").hide();
				 var $ctrl = $('<input/>').attr({ type: 'text', id: 'mphonenumtext',name:'text', value:'text'}).addClass("text");
				$("#holder").append($ctrl);
				$("#mphonenumtext").val($("#mphonenum").text()); 
				
				}
				);
});

	</Script>

and JSP code is as follows

<section>
							<form id="phone_Info" class="nice">							
							<fieldset>
								<legend>
									Phone Number
								</legend>
								<p>ABC send alerts to your mobile device.</p>
								<table class="tblPersonalInfo">
									<tr>
										<td class="lblCol">Mobile Number</td>
										<td> <div id=holder><label id=mphonenum>123456789</label></div></td>
									</tr>
									
								</table>
								<div class="btnEditSave">
									<div class="floatR">
										<button name="edit_phone" id="edit_phone" >Edit</button>
									</div>
								</div>
							</fieldset>

The result of this code is fine but it reverts backthe result.It shows label again and Text box dispappears.

I tried same JQuery code in HTML it woked fine.
Can anybody help me in this??