JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id='text' cols="40" rows="20" onblur="storeSelection();">
</textarea>

<div id="opt">
    <input id="input" type="text" size="35">
    <input type="button" onclick='pasteIntoInput(document.getElementById("input").value)' value="button"/>

</div>

JavaScript

var storedSelectionStart = null;
var storedSelectionEnd = null;

function pasteIntoInput(text) 
{ 
        el=document.getElementById("text");
    
    el.focus();    
    if((storedSelectionStart != null) && (storedSelectionEnd != null))
    {
        start = storedSelectionStart;
        end = storedSelectionEnd;
    }
    else
    {
        start = el.selectionStart;
        end = el.selectionEnd;
    }
    if (typeof start  == "number"&& typeof end == "number") 
    { 
        var val = el.value; 
        var selStart = start;
        el.value = val.select(0, selStart) + text + val.select(end );        
        end  = start  = selStart + text.length;
    } 
    else if (typeof document.selection != "undefined") 
    {
       var textRange = document.selection.createRange();        
       textRange.text = text;       
       textRange.collapse(false);        
       textRange.select();
    } 
}  

function storeSelection()
{
    //get selection
    el=document.getElementById("text");      
    storedSelectionStart  = el.selectionStart;
    storedSelectionEnd = el.selectionEnd;
  
    
}