JSFiddle - React, Tailwind, and code Playground

HTML

<textarea></textarea><br />
<a href="#" class="liveText">click me to add a live textarea</a>
<div id="copy"></div>

JavaScript

$('.liveText').live('click',function(){
    $('<textarea />').appendTo('#copy');
});

(function($) {

    $.fn.autogrow = function(options) {
        
        this.filter($(this).selector).each(function() {

            var $this       = $(this),
                minHeight   = $this.height(),
                lineHeight  = $this.css('lineHeight');

            $(this).css('height','hidden');

            var duplicate = $('<div></div>').css({
                position:   'absolute',
                top:        -10000,
                left:       -10000,
                width:      $(this).width(),
                fontSize:   $this.css('fontSize'),
                fontFamily: $this.css('fontFamily'),
                lineHeight: $this.css('lineHeight'),
                resize:     'none',
                'word-wrap':'break-word',
                'white-space':'pre-wrap'
            }).appendTo(document.body);
                                                                               
            var update = function() {

                var val = this.value.replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/&/g, '&amp;')
                    .replace(/\n/g, '<br/>');

                duplicate.html(val);
                $(this).css('height', Math.max(duplicate.height() + 20, minHeight));
            }

            $(this).change(update).keyup(update).keydown(update);

            update.apply(this);

        });

        return this;

    }

})(jQuery);
    $('textarea').autogrow()