jQuery - How to drop content to concrete position into INPUT?

I'm solving such a problem with Drag&Drop via jQuery. I have a simple HTML where there are MARK elements inside the LABEL, which I make draggable. Then I want to transfer these elements to INPUT (text). For CSS using PicoCSS.

JS:

$(document).ready(function () {
    $("mark").draggable({
        helper: "clone"
    });
    $('input[type="text"]').droppable({
        drop: function (event, ui) {
            this.value += ui.draggable.text();
            this.focus();
        }
    });
});

HTML:

<label for="MF">
    Any information about XYZ... Drag and drop to input: <mark>Item1</mark>, <mark>Item 2</mark>,<mark>Item 3</mark>
    <input type="text" id="MF" name="MF" placeholder="Drop there" required>
</label>

I can do that thanks to the code, but DROP always puts the content at the end of INPUT. Is there any way to modify the code to insert content at a specific position of INPUT? It may be that there is a string in the INPUT, e.g. "Yesterday I met ? and told me that...". And I need to drag the text from the MARK with the mouse to the question mark, and the text will be inserted (dropped) at that position to the question mark. Unfortunately, so far it works by drop (insert) only at the end. The need is to keep everything in forms, the data will be retrieved from the DB, further processed and stored again in the DB.

You can run it there - https://codepen.io/vontrips/pen/jOYzGOM