动态地将行添加到表中，该表保存每列中的选择下拉列表

Hi guys a few days ago you kindly helped me to do THIS and now i am trying to do the same but with a table.

I have a table with two colums and one row in the beginning. the user can choose a language from the first column and the proficiency level in the second column.

now, i want to add one more row with above mentioned elements onClick, with a hardcoded max limit that i can change if i need to.

also a number has to be appended to the name of the select elements like nativelang0, nativelang1, etc.

I have tried to add my selects into a table while using this code:

<label for="nativelang" >Native language:</label>
            <select name="nativelang" id="nativelangdrop" required>
                <?php
                    if ($file = @fopen('txt/languages.txt', 'r')) {
                    while(($line = fgets($file)) !== false) {
                    echo "<option>{$line}</option>";
                    }
                    fclose($file);
                    }
                ?>
            </select>
            <span id="additionalNative"></span>

            <div id="plusBtnNative" align="left" style="position:relative; display:block;">
            <a href="javascript:;">
            <img id="addBtnNative" title="Add another language" width="15" height="15" border="0" src="img/plus.png" alt="add Native Language"></img>
            </a>
            </div>

and this:

<script>
var totaln;
totaln = 2;


$("#addBtnNative").on("click", function() {
    var ctr = $("#additionalNative").find(".extraN").length;
    if (ctr < totaln) {
        var $dd = $("#nativelangdrop").clone();
        $dd.attr("id", "dd" + ctr);
        $dd.attr("name", "nativelang" + ctr);
        $dd.addClass("extraN");
        $("#additionalNative").append($dd);
    }
});
</script>

but i cant seem to make it work in a table with dublicating rows...

my table is like this

<table class="languages">
    <tr>
        <td>Language</td><td>Level</td>
    </tr>
    <tr>
        <td>
            <select name="nativelang" id="nativelangdrop" required>
                    <?php
                        if ($file = @fopen('txt/languages.txt', 'r')) {
                        while(($line = fgets($file)) !== false) {
                        echo "<option>{$line}</option>";
                        }
                        fclose($file);
                        }
                    ?>
                </select>
        </td>
        <td>
            <select name="langlevel" id="langleveldrop" required>
                    <?php
                        if ($file = @fopen('txt/levels.txt', 'r')) {
                        while(($line = fgets($file)) !== false) {
                        echo "<option>{$line}</option>";
                        }
                        fclose($file);
                        }
                    ?>
                </select>
        </td>
    </tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

and i tried it like this but to no avail... when i click add i get empty rows. what do i have to change to make the rows have the select elements in them?

thanks for your help.