add multiple field to jquery ui dialog modal

Question

I have a dialog modal and i want to add to them a select field and a table.

There is a html description to a dialog modal and a select field and a table field

<div id="task_properties" style="display:none;">
</div>

<div id="properties-list" class="ui-widget">

        <table id="list_task_properties" class="ui-widget_task ui-widget-content">
        <thead>
            <tr class="ui-widget-header">
                <th>Id</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        </table>
    </div>

  <select class="dropdown-toggle" id="selection" style="display:none;">
 </select>

and there is a jquery code where i manage the dialog modal

function openTaskPropertiesAssignee(taskId){
$('#task_properties').dialog({
    height: 520,
    width: 400,
    modal: true,
    title: taskId,
    draggable:true,
    open: function () {
        $('#selection').css("display","block");
        $('#list_task_properties').css("display","block");
        $(this).html($('#selection'));
        $(this).html($('#list_task_properties'));

    },
    buttons: {
        AddPropertie:{
            'class':"add_propertie_button",
            text: 'add propertie',
            click:function(){

            }
        },
        Ok: function () {
            $(this).dialog("close");
        }
    }
}); 
$("#selection").change(function(){
    console.log($("#selection :selected").text());
});}

But when i run, i have only the last field that i added (table), so i can't see both fields (table and select).

Anyone can tell me where i'm wrong, or take me an example to how add two fields in the jquery Ui dialog form

Answer 1

.html() overwrites div content every time you use the method. so use .append() instead of .html(), Like:

$(this).append($('#selection'));
$(this).append($('#list_task_properties'));

Or you can also use

$(this).html($('#selection'));
$(this).append($('#list_task_properties'));