JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <div aria-label="test" contenteditable="true" role="textbox" spellcheck="true" class="ctrl-no-border testClass noResize text-box multi-line" style="height:100px; background-color:white;" data-text="test" id="textId1">
  </div>
  <div>
    <input type="button" onclick="addSpanWithAutocorrect()" name="AddSpan" value="AddSpan" />
  </div>
</div>

JavaScript

var count = 0;

var listToShow = ['alpha', 'bravo', 'charlie', 'delta', 'epsilon', 'foxtrot', 'golf', 'hotel', 'india', 'joker', 'lima', 'mike', 'november', 'oscar', 'peru', 'quebec', 'romeo', 'sierra', 'tango', 'umbrella', 'violet', 'whiskey', 'xray', 'yankee', 'zulu'];

var autoCompleteOptions = {
  source: listToShow
};

function addSpanWithAutocorrect() {
  var div = document.getElementById("textId1");

  //Create and append the Span
  var span = document.createElement('span');
  span.className = "autocomplete";
  span.innerHTML = "al";
  var spanId = "ht" + count.toString();
  count++;
  span.id = spanId;
  span.contentEditable = true;

  div.innerHTML = div.innerHTML.substring(0, div.innerHTML.lastIndexOf("al"));
  div.appendChild(span);

  $("#textId1").on("click", "#" + spanId, function() {
    alert("Clicked on " + spanId);
    console.log("Clicked on " + spanId);
  });
  
  $("#textId1").on("keydown.autocomplete", "#" + spanId, function(e) {
  	if (!$(this).data("autocomplete")) {
    	$(this).autocomplete({
      	source: listToShow
      });
    }	  
  });
}