JSFiddle - React, Tailwind, and code Playground

by Krishna Gopinath

HTML

<table>
    <tr>
        <td colspan="4" style="text-align:center;">NOTES
            <br/>
            <textarea class="sam_notes maxed" maxlength="750" name="sam_notes" style="height:100px;width:90%;margin:0 auto;"></textarea>
            <br/> <span style="font:normal 11px sans-serif;color:#B00400;">
         <span class='counter_msg'></span>
</span>
        </td>
    </tr>
</table>

JavaScript

$('td').on('focus keypress', '.sam_notes', function (e) {
    
    var $this = $(this);
    var msgSpan = $this.parents('td').find('.counter_msg');
    var ml = parseInt($this.attr('maxlength'), 10);
    var length = this.value.length;
    var msg = ml - length + ' characters of ' + ml + ' characters left';

    msgSpan.html(msg);
});