Как выложить список динамически выпадающих с использованием JavaScript и Laravel?

Question

Я использую Laravel, и я динамически выпадаю с помощью JavaScript. У меня есть проблема, когда я должен положить список выпадающего в javascript. Я использую этот код, чтобы показать список на моем лезвии вида laravel:

<select id="sip_material_add" name="sip_material_add" class="selectpicker form-control edit" data-live-search="true" style="width:100%" required> 
    @foreach($material as $getData)
    <option value="{{$getData->MAT_ID}}">{{ $getData->MAT_NAME }} </option>
    @endforeach            
</select>

И я хочу, чтобы он был динамически раскрыт, как на картинке ниже.

Это мой код JavaScript для динамического добавления выпадающего списка:

$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<tr />");
        div.html(GetDynamicMaterial(""));
        $("#TextBoxContainer").append(div);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("tr").remove();
    });
});

function GetDynamicMaterial() {
    return '<td><select name="ship_material_add" class="form-control">'
         + '<option></option>'
         + '</select></td>'  
         + '<td width="25%"><input name = "ship_quantity_add" type="text" class="form-control" /></td>' 
         + '<td width="15%"><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
}