JSFiddle - React, Tailwind, and code Playground

HTML

<textarea class="scanwid" name="q100" id="q100" rows="5" maxo="100"></textarea>
<textarea class="scanwid" name="q101" id="q101" rows="5"  maxo="100"></textarea>
<textarea class="scanwid" name="q102" id="q102" rows="5"  maxo="100"></textarea>

JavaScript

(function($){
        $.fn.textareaCounter = function(options) {
            // setting the defaults
            // $("textarea").textareaCounter({ limit: 100 });
            var defaults = {
                limit: $(this).attr("maxo")
            };  
            var options = $.extend(defaults, options);

            // and the plugin begins
            return this.each(function() {
                var obj, text, wordcount, limited, limit;
               

                obj = $(this);
                obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" class="counter-text">Max. '+options.limit+' words</span>');

                obj.keyup(function() {
                    text = obj.val();
                    if(text === "") {
                        wordcount = 0;
                    } else {
                        wordcount = $.trim(text).split(" ").length;
                    }
                    if(wordcount > options.limit) {
                        $(this).next().html('<span style="color: #DD0000;">0 words left</span>');
                        limited = $.trim(text).split(" ", options.limit);
                        limited = limited.join(" ");
                        $(this).val(limited);
                    } else {
                        $(this).next().html((options.limit - wordcount)+' words left');
                    } 
                });
            });
        };
    })(jQuery);

$("textarea").textareaCounter();