如何克隆包含表格中的文本框和动态下拉框的行

Question

我有一个包含一行的表，其中包含一个文本框和一个动态下拉列表，我想克隆该行。要做到这一点，我正在做以下事情：

下面的代码用于显示tabel包含一行，其中包含一个文本框和动态下拉框：

<table>
<tr>
    <td id="j" class="i">
        Skills
        <input data-bind="value:skl" name="skl" id="skl" style="width: 120px; height: auto"
            data-type="string" class="k-textbox" />
        <input id="styp" style="width: 120px; height: auto" /><span></span>
        <button class="add" value="add">
            Add</button>
    </td>
    <td>
    </td>
    <td>
        @* <span data-for="styp" class="k-invalid-msg"></span></td>*@
    </td>
</tr>
@*this code is to display the add rows and delete rows functionality*@
<tr id="fo" style="display: none">
    <td width="100%">
        <input type="text" class="k-textbox" id="a" width="100 px" height="20 px" />
        <select style="width: 90px; height: auto" id="options" data-bind="value:skill" data-text-field="skill"
            data-value-field="skillid" data-source="skilldatasource" data-role="dropdownlist">
        </select>
        <button type="button" id="b" class="delete" value="delete">
            Delete</button>
    </td>
    <td>
    </td>
    <td>
    </td>
</tr>
</table>


//Below code is for defining datasource to the dropdownlist

var skilldatasource = new kendo.data.DataSource({
transport: {
    read:
        {
            url: "/ProfileMgmtProfileSearch/Skills",
            type: "POST",
            dataType: "json"
        }
},
schema: {
    model: {
        id: "skillid",
        fields: {
            skillid: { type: "number" },
            skill: { type: "string" }
        }
    }
}
})

skilldatasource.read();

$(document).ready(function () {
//Add button click functionality to Add new row to the Skills row with same fields //and also append a delete button to it:
$('.add').click(function () {
    alert("cliked");
    id++;
    var prot = $("#fo").find("td").clone();
    // $("#options").clone();
    prot.attr("class", "")
    prot.attr("id", id);
    prot.addClass("new");
    $('<tr/>').append(prot).insertAfter($('#theTable tbody>tr:last'));
    var dropdownlist2 = prot.find("select#options");
    alert("hai....");
    alert(dropdownlist2);
    dropdownlist2.kendoDropDownList({});
});

// button click functionality to delete the specified row containing that delete button
$('#theTable').delegate('.delete', 'click', function () {
    $(this).closest("td").remove();
    var first = dropdownlist.dataSource.get(c--);
    dropdownlist.dataSource.remove(first);
})
});

=============================================== ==============================

Here by executing the above code am able to clone the entire row but the dropdown box is not getting values in it i.e., datasource is not cloned, so plz help me out of these problem.