Each letter is individually enclosed in a <span> element, and the group of letters forming a word is also enclosed in a <span> (I will not over-explain why this is the right approach for my typing website). I want to animate my caret or move it towards the left side of the next letter.

My plan is to assign a state to the next letter, and the caret will follow whatever element is assigned to that state. Please note that the state will be dynamic and will be changed whenever the user types.