Expected behavior I create a few li elements from received data from a JSON file. I want these list items to be draggable inside the ul.

Actual behavior I've got a JSON file that contains data, later this should fetch data from an external json file. This data gets return to the variable data in my Javascript file. When the page gets loaded the function that can be found at the bottom of this message gets called. I've got a sortable-list and the created li elements from the received data should be added to this list. This all works perfectly, however because the li elements dont get a unique data-mdb-id for the drag & drop api, the dragging and dropping part doesn't work. Is there anyway i can give these elements the data-mdb-id after creating the elements?

Resources shots, code snippets etc.)

let formFieldArea = document.querySelector('#formFieldArea');

window.addEventListener('load', async () => {
await fetchData();
let fetchedData = await data.value[0];
let formFields = await fetchedData.formFields;
for(i = 0; i < formFields.length; i++){
    latestItemData = await formFields[i].type;
    let inputfield = formFieldArea;
    let li = document.createElement('li');
    li.dataset.type =  formFields[i].type;
    li.className = `p-3 border border-dark sortable-item formField ${li.dataset.type}`;
    li.style = "transition: none 0s ease 0s; transform: translate3d(0px, 0px, 0px);"
    inputfield.insertAdjacentElement('beforeend', li);
    }
});

async function fetchData() {
    let res = await fetch('/static/json/test.json');
    data = await res.json();
    return data;
}