Create and Remove textbox dynamically using JQuery and JavaScript

Hi,
Here I have coded for creating the textbox dynamically using JQuery for Asp.net applications. Also you can find the Jquery message box(modal dialog)  for getting the number of details to be added. Also you can find how to remove the dynamically created textboxes.  Am appending three textboxes as a Single record as you can find the animation below.



ASP.NET CODE AND SCRIPTING

<html>
<head runat="server">
<title>Copyright @ Fourthbottle</title>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui1.10.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css"/>
   
<script type="text/javascript">

        function Show() {
            $("#dialog:ui-dialog").dialog("destroy");
            var titl = "Create textbox using JQuery";
            document.getElementById('dialog-modal').title = titl;
            $("#dialog-modal").dialog({
                height: 150,
                width: 450,
                modal: true

            });
            return false;
        }
        function CloseDailog() {
            $('#dialog-modal').dialog('close');
            return false;
        }
        function Okclick() {

            var counter = document.getElementById("<%=NumOfsubj.ClientID %>").value;
            CloseDailog();
            for (var i = 1; i <= counter; i++) {
                $('<div/>', { 'id': 'TextBoxesGroup' }).html(
              $('<label/>').html()
            )
             .append($('<input type="text" runat="server" class="c1" placeholder="Enter Subject Code" >').attr({ 'id': 'SubjectCode' + i, 'name': 'Subcode' + i }))
            .append($('<input type="text" runat="server" class="c1" placeholder="Enter Subject Name" >').attr({ 'id': 'SubjName' + i, 'name': 'Subname' + i }))
            .append($('<input type="text" runat="server" class="c1" placeholder="Enter Staff Name" >').attr({ 'id': 'StaffName' + i, 'name': 'Staff' + i }))
            .appendTo('#TextBoxesGroup')
                $('.c2').css("display", "inline");
            }
            return false;
        }

        function Removerow() {
            var counter = document.getElementById("<%=NumOfsubj.ClientID %>").value;
            $("#SubjectCode" + counter).remove();
            $("#SubjName" + counter).remove();
            $("#StaffName" + counter).remove();
            counter = counter - 1;
            document.getElementById("<%=NumOfsubj.ClientID %>").value = counter;
            return false;
        }
 </script>
</head>

<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAdd" OnClientClick="javascript:return Show();" runat="server" Text="Add New Exams" />
<div id='TextBoxesGroup' style="text-align: center">
</div>
<div style="text-align: center">
<asp:Button ID="btnRemoveRow" runat="server" Style="display: none" OnClientClick="javascript:return Removerow();" class="c2" Text="Remove row" />
<asp:Button ID="Button1" runat="server" Text="Cancel" Style="display: none" class="c2" />
</div>
<div id="dialog-modal" style="display: none">Enter the number of records to Add &nbsp;&nbsp;
<asp:TextBox ID="NumOfsubj" runat="server" Style="width: 50px;"></asp:TextBox><br />
<div style="text-align: center">
<asp:Button ID="btnOk" runat="server" Text="Okay" OnClientClick="javascript:return Okclick();" />&nbsp;&nbsp;
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="javascript:return CloseDailog();" />
</div>
</div>
<asp:HiddenField ID="hdnvalue" runat="server" />
</div>
</form>
</body>
</html>