I am creating a select filed dynamically based on a data list retrieving from server side.

var DataList1 = [{'id':'54423232', 'name':file1.txt}, {'id':'54423232', 'name':file2.txt}]; 

const DataSelect = document.createElement('select');
DataSelect.ondrop="drop(event)";
DataSelect.ondragover="allowDrop(event)";

         for (var i = 0; i < DataList1.length; i++) {
             const opt = DataList1[i].name;
             const el = document.createElement("option");
             el.textContent = opt;
             el.value =  DataList1[i].id
             DataSelect.appendChild(el);
         }

I am also creating a data table based on a DataList2

var DataList2 = [{'id':'54423242', 'name':file3.txt}, {'id':'544237852', 'name':file4.txt}];


 for(var i = 0; i < DataList2.length; i++) {


    var InnerElemet = `<div class="data-header"><b> ${DataList2[i]['name']} </b></div>
                    <div class="data-description"> ${DataList2[i]['id']} </div>`

    var DataTableElement = document.createElement('li')

    DataTableElement.className = 'data-set-row'
    DataTableElement.innerHTML = InnerElemet
    DataTableElement.draggable = 'true'
    DataTableElement.ondragstart = "drag(event)"
    DataTable.append(DataTableElement)

    }

I want to make this data table row draggable and droppable to the select filed and want to add a this dropped data as a new selected option.

I'm learning javascript for my project and stuck at this point please suggest a solution.

Thanks