I have these two functions: the first one is for when someone chooses an option from the select box in the toolbar add it to the content of the editor!

the code is working but it add span like this:

<span class="text-tiny">Second Side</span>

I want to when gose to editor become like this:

<span class="text-tiny" id="second_side">Second Side</span>

with id in the span

The Code

document.addEventListener("DOMContentLoaded", function() {

    forms.forEach(function(item,index) {
        var option = document.createElement('option');
        option.setAttribute("value",'<span class="text-tiny" id="'+id+item.type+'">'+item.name+'</span> <span>­</span>');
        option.innerHTML = item.name;
        select.appendChild(option);
        div.appendChild(select);
    });

    select.addEventListener('change', (e) => {
        insertHTMLAtCursor(editor,select.value)
    });
    
});

function insertHTMLAtCursor(id,value){
    // value = <span class="text-tiny" id="second_side">Second Side</span>
    const viewFragment = id.data.processor.toView(value);
    const modelFragment = id.data.toModel(viewFragment);
    id.model.insertContent(modelFragment, id.model.document.selection);
}