JSFiddle - React, Tailwind, and code Playground

HTML

Letter: <span id="highlight"></span>
<br>
<br>
<span id="0x0"></span>
Position: <span id="result"></span>.

JavaScript

var text = ["ab", "cde"];
var hightlight = document.getElementById('highlight');

var t = 0, i = 0;
var letter = document.createElement('span')
letter.id = t + "x" + i;
letter.innerHTML = text[t];
highlight.appendChild(letter);
var position = $("#" + t + "x" + i).position();

document.getElementById('result').innerHTML = "top: " + position.top + ", left: " + position.left;