How to generate dynamic rows while clicking on a button, in asp.net with java script

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<SCRIPT language="javascript">
    function addRow(tableID) {
 
        var table = document.getElementById(tableID);
 
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
 
        var colCount = table.rows[0].cells.length;
 
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            alert("jka")
            switch (newcell.childNodes[0].type) {
                case "DropDownList":
                    alert("jkadrop")
                   // newcell.childNodes[0].Id = parseInt(substring(0, newcell.childNodes[0].Id.toString.length - 1)) + parseInt(substring(newcell.childNodes[0].Id.toString.length - 1, newcell.childNodes[0].Id.toString.length)) + 1;
                    alert(parseInt(substring(0, newcell.childNodes[0].Id.toString.length - 1)));
                    //alert(newcell.childNodes[0].Id.toString);
                    newcell.childNodes[0].value = "";
                    break;
                case "TextBox":
                    alert("jkatext")
                    newcell.childNodes[0].Id = i + 1;
                    newcell.childNodes[0].value = "";
                    break;
                case "checkbox":
                    alert("jkachek")
                    newcell.childNodes[0].Id = i + 1;
                    newcell.childNodes[0].checked = false;
                    break;
            }
        }
    }
 
    function deleteRow(tableID) {
        try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
 
            for (var i = 0; i < rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if (null != chkbox && true == chkbox.checked) {
                    if (rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
            }
        } catch (e) {
            alert(e);
        }
    }
 
    </SCRIPT>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /><asp:Button
        ID="btnSubmit" runat="server" onclick="btnSubmit_Click" Text="Submit" />
&nbsp;<TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </TD>
            <TD>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>2 wheeler</asp:ListItem>
                    <asp:ListItem>4 Wheeler</asp:ListItem>
                </asp:DropDownList>
            </TD>
            <TD>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </TD>
        </TR>
    </TABLE>
</asp:Content>