adding rows dynamically to an html table with

Question

I have a previous html code.

 <table width="600px" cellspacing="0" border="1" id="mainTable">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    full Name
                </th>
                <th>
                    Type
                </th>
            </tr>
            <tr>
                <td>
                    <input id="11" type="text" />
                </td>
                <td>
                    <input id="12" type="text" />
                </td>
                <td>

                    <select id="13">
                    </select>
                </td>
            </tr>
        </table>
        <input type="button" onclick="return btnAddRow_onclick()"/>

i want jquery function that will add row with html elements and with new id. for example, after clicking, will add:

<tr>
                <td>
                    <input id="21" type="text" />
                </td>
                <td>
                    <input id="22" type="text" />
                </td>
                <td>

                    <select id="22">
                    </select>
                </td>
            </tr>

Answer 1

Something like

<script>
    $(function(){
        var currentID = 1;

        $("#btn1").click(function(){
            currentID ++;
            var htmlToAppend = "<tr><td><input id='txt" + currentID + "1' type='text' /></td><input id='txt" + currentID + "2' type='text' /></td><td><select id='cmb" + currentID + "3'></select></td></tr>";
            $("#mainTable").append ( htmlToAppend );

        });
});
</script>
<table width="600px" cellspacing="0" border="1" id="mainTable">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    full Name
                </th>
                <th>
                    Type
                </th>
            </tr>
            <tr>
                <td>
                    <input id="txt11" type="text" />
                </td>
                <td>
                    <input id="txt12" type="text" />
                </td>
                <td>

                    <select id="cmb13">
                    </select>
                </td>
            </tr>
        </table>
        <input type="button" id="btn1" value="Click me" />