How to add the Id attribute in span tag of mention plugin in classic editor5?

Question

Here I am using custom Ck editor 5 version.As you can see in first image I have Id in console while inspect the dropdown item. I want that Id for uniquely identification after select the option from dropdown You can see second image.Tell me how i can append the id in span tag of second image. [1]: https://i.stack.imgur.com/XlLY7.png [2]: https://i.stack.imgur.com/NYqTV.png

<style>
 var editors = new Map();
    ClassicEditor
    .create( document.querySelector( '#modalD' ), {
        mention: {
            feeds: [
                {
                    marker: '@@',
                    feed: getUser,
                    itemRenderer: customItemRenderer,
                    
                }
            ]
        }
    } )
                .then(editor => {
                editors.set(modalD, editor);
            })
            .catch( error => {
                console.error( error );
            } );

    function MentionCustomization(editors) {
        debugger;
        // The upcast converter will convert view <a class="mention" href="" data-user-id="">
        // elements to the model 'mention' text attribute.
        editors.conversion.for('upcast').elementToAttribute({
            view: {
                name: 'span',
                key: 'data-mention',
                classes: 'mention',
                attributes: {
                    'data-user-id': true
                }
            },
            model: {
                key: 'mention',
                value: viewItem => {
                    // The mention feature expects that the mention attribute value
                    // in the model is a plain object with a set of additional attributes.
                    // In order to create a proper object use the toMentionAttribute() helper method:
                    const mentionAttribute = editor.plugins.get('Mention').toMentionAttribute(viewItem, {
                        // Add any other properties that you need.
                        userId: viewItem.getAttribute('data-user-id')
                    });

                    return mentionAttribute;
                }
            },
            converterPriority: 'high'
        });

        // Downcast the model 'mention' text attribute to a view <a> element.
        editors.conversion.for('downcast').attributeToElement({
            model: 'mention',
            view: (modelAttributeValue, { writer }) => {
                // Do not convert empty attributes (lack of value means no mention).
                if (!modelAttributeValue) {
                    return;
                }

                return writer.createAttributeElement('a', {
                    class: 'mention',
                    'data-mention': modelAttributeValue.id,
                    'data-user-id': modelAttributeValue.userId
                }, {
                    // Make mention attribute to be wrapped by other attribute elements.
                    priority: 20,
                    // Prevent merging mentions together.
                    id: modelAttributeValue.uid
                });
            },
            converterPriority: 'high'
        });
    }
 function getUser(queryText) {
        var mentionArr2 = [];
        return new Promise(resolve => {
            debugger;
            setTimeout(() => {
                $.ajax({
                    url: '@Url.Action("getMentionList", "Note")',
                    contenttype: 'application/json; charset=utf-8',
                    data: { Alphabet: queryText },
                    type: 'POST',
                    async: false,
                    success: function (data) {
                        debugger;
                        $.each(data, function (i, item) {
                            mentionArr2.push({
                                 id: "@@" + item.name,
                                name: item.name,
                                    userId:item.id
                            });
                        });
                    }
                });
                const itemTo = mentionArr2
                    .filter(isItemMatching)
                    .slice(0, 10);
                resolve(itemTo);
            }, 100);
        });
        function isItemMatching(item) {
            const searchString = queryText.toLowerCase();
            return (
               item.id.toLowerCase().includes(searchString)
            );
        }
    }
   function customItemRenderer( item ) {
       //alert(item);
       // debugger
    var itemElement = document.createElement( 'span' );

    itemElement.classList.add( 'custom-item' );
    itemElement.id = item.userId;
    //itemElement.textContent = `${ item.name } `;

    const usernameElement = document.createElement( 'span' );

    usernameElement.classList.add( 'custom-item-username' );
    usernameElement.textContent = item.id;

    itemElement.appendChild( usernameElement );
    //editors.appendChild()


    return itemElement;
   }
</style>