JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="textf2" rows="3" maxlength="3000" placeholder="Enter text" cols="35">
</textarea>
<button id="bt6" type="submit" name="search">Post status</button>

<div class="dropdown" id="div1">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <ul id="myDropdown" class="dropdown-content">
    <li>&#x1F601</li>
    <li>&#x1F603</li>
    <li>&#x1F605</li>
  </ul>
</div>

CSS

#myDropdown {
  display: none
}

JavaScript

emojis = document.getElementById("myDropdown").getElementsByTagName("li")

for (var i = 0; i < emojis.length; i++) {
  emojis[i].addEventListener("click", function() {
    var smiley = this.innerHTML;
    ins2pos(smiley, 'textf2');
  });
}

function ins2pos(str, id) {
  var TextArea = document.getElementById(id);
  var val = TextArea.value;
  var before = val.substring(0, TextArea.selectionStart);
  var after = val.substring(TextArea.selectionEnd, val.length);

  TextArea.value = before + str + after;
  setCursor(TextArea, before.length + str.length);

}

function setCursor(elem, pos) {
  if (elem.setSelectionRange) {
    elem.focus();
    elem.setSelectionRange(pos, pos);
  } else if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.matches('#myDropdown li')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}