JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">add item</a><br/>
<div contenteditable="true" type='text' id="searchInput" class="c_textBox" > 

</div>

CSS

.c_textBox{
  display:block;
  width:200px;
  height:40px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.6rem;
    border: none;
    padding-right: 3rem;
    padding-left: 2rem;
    background-repeat: no-repeat;
    background-size: 2rem;
   /* background-position: 100% 50%;*/
  background-color:lightgrey;
  border: 2px black solid;
  padding:4px;
}

JavaScript

$("a").click(function(evt){
  evt.preventDefault();
  var textBox = document.querySelector(".c_textBox")
  textBox.innerText +=" hello  a,";
  var len = textBox.innerText.length + 1

    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(textBox.childNodes[0], len );
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    textBox.focus();
});