JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<input id="t1" value="hello hello" />
</div>

CSS

#wrapper {position: relative; }
.m {border: 1px solid gray; }

JavaScript

$("#t1").on("contextmenu", function(e) {
    var $p = $("<div class='m'><a id='a1' href='#'>option 1</a><br /><a id='a2' href='#'>option 2</a></div>");
    $p.css({"position": "absolute", "left": "100px", "top": "32px"});
    $("#wrapper").append($p);
    e.preventDefault();
});

$("html, body").on("click", function() {
    $(".m").hide().remove();
});

$("html, body").on("click", "#a1", function() {
    alert(getSelection(document.getElementById("t1")));
});

function getSelection(elm) {
    var start = elm.selectionStart;
    var end = elm.selectionEnd;
    return elm.value.substring(start, end);
}