How to get dropdown list using HTML tag in table append function?

Hope you all are fine I was working in mvc 5 and need to add a dropdown list which will get the values from model/Controller. The issue is when I add the @Html.DropdownlistFor function the code works but when I append a new row in the Table tag using javascript that Dropdown doesn't appears.

This is for the MVC 5 with entity framework(.net).

//This code works for me and appears a DropDownList.
<td>
                        @Html.DropDownList("TravelMode", null, htmlAttributes: new { @id = "travelmode", @class = "form-control t-mode01" })
 </td>

 //But this doesn't shows any dropdownlist.
 

    //For Travel Details
    $(document).on("click", ".classAdd", function () {

        var rowCount = $('.data-contact-person').length + 1;

        var name = document.getElementById("name").value;
        var locfrom = document.getElementById("locfrom").value;
        var locto = document.getElementById("locto").value;
        var datefrom = document.getElementById("datefrom").value;
        var dateto = document.getElementById("dateto").value;
        var instructions = document.getElementById("instructions").value;
        var travelmode = $('#travelmode option:selected').text();

        var contactdiv = '<tr class="data-contact-person">' +
                '<td><input type="checkbox"class="form-control f-check01" /></td>' +
                '<td><input type="text" value="' + name + '" class="form-control f-name01" /></td>' +
                '<td><input type="text" value="' + locfrom + '" class="form-control l-from01" /></td>' +
                '<td><input type="text" value="' + locto + '" class="form-control l-to01" /></td>' +
                '<td><input type="text" value="' + datefrom + '" class="form-control d-from01" /></td>' +
                '<td><input type="text" value="' + dateto + '" class="form-control d-to01" /></td>' +
                '<td>@Html.DropDownList("TravelMode", null, htmlAttributes: new { @id = "travelmode", @class = "form-control t-mode01" })</td>' +
                '<td><input type="text" value="' + instructions + '" class="form-control l-ins01" /></td>' +

                '</tr>';
        $('#maintable').append(contactdiv);

        ////Clear fields
        $('#name').val('').focus();
        $('#locfrom,#locto,#datefrom,#dateto,#travelmode,#instructions').val('');
    });

I just want a code Which I can write in Javascript table tags for dropdowns having values from DataBase.

//For Travel Details
$(document).on("click", ".classAdd", function () {

    var rowCount = $('.data-contact-person').length + 1;

    var name = document.getElementById("name").value;
    var locfrom = document.getElementById("locfrom").value;
    var locto = document.getElementById("locto").value;
    var datefrom = document.getElementById("datefrom").value;
    var dateto = document.getElementById("dateto").value;
    var instructions = document.getElementById("instructions").value;
    var travelmode = $('#travelmode option:selected').text();

    var contactdiv = '<tr class="data-contact-person">' +
            '<td><input type="checkbox"class="form-control f-check01" /></td>' +
            '<td><input type="text" value="' + name + '" class="form-control f-name01" /></td>' +
            '<td><input type="text" value="' + locfrom + '" class="form-control l-from01" /></td>' +
            '<td><input type="text" value="' + locto + '" class="form-control l-to01" /></td>' +
            '<td><input type="text" value="' + datefrom + '" class="form-control d-from01" /></td>' +
            '<td><input type="text" value="' + dateto + '" class="form-control d-to01" /></td>' +
            '<td>@Html.DropDownList("TravelMode", null, htmlAttributes: new { @id = "travelmode", @class = "form-control t-mode01" })</td>' +
            '<td><input type="text" value="' + instructions + '" class="form-control l-ins01" /></td>' +

            '</tr>';
    $('#maintable').append(contactdiv);

    ////Clear fields
    $('#name').val('').focus();
    $('#locfrom,#locto,#datefrom,#dateto,#travelmode,#instructions').val('');
});