JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chars">
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>
</div>
<br />
<input type='text' name='title' value="123" id="titleField" />
<br />
<textarea name='message'id="messageField">456</textarea>

CSS

#chars ul { margin: 0; padding: 0; }
#chars li { display: inline; background-color: #aaa; padding: 5px; cursor: pointer; }

JavaScript

$(document).ready(function() {
    $('#chars ul li').click(function(event) {
        event.preventDefault();

        // this is fine
        var char = $(this).text();
        console.log(char);
        
        // these returns undefined
        console.log($(':focus').attr('id'));
        console.log($(document.activeElement).attr('id'));
        console.log($(this).parents('.item').attr('id'));
        
        // update 'element' content here by inserting 'char'
    });
});