JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <input type="text" value="" name="txtTextBox1" id="xtTextBox1"></input>
    <div id="charCounter"></div>
</div>

JavaScript

var $charCounter = $('#charCounter');

$("#xtTextBox1").keyup(function(){
    strLength = $(this).val().length;
    $charCounter.html(strLength);
        if (strLength > 15){
            strContent = $(this).val();
            $(this).remove();
            $('#container').prepend('<textarea rows="2" id="convertedArea" cols="20">' + strContent + '</textarea>');
            $('#convertedArea').focus();
        }
});

$('#convertedArea').live('keyup' , function(){
    strLength = $(this).val().length;
    $charCounter.html(strLength);
});