JSFiddle - React, Tailwind, and code Playground

HTML

<p>click just right of the letter c, then just left of the letter c, note the position doesn't change</p>
<input id="inpelem" value = "abc def"><br>
    <div>caret position: <span></span></div>

JavaScript

$('input').click(function(){
    this.focus();
     /**var Sel = document.selection.createRange();
     Sel.moveStart('character', -inelem.value.length);
     CaretPos = Sel.text.length;*/
    CaretPos = this.selectionStart;   
$('span').text(CaretPos);

});