JSFiddle - React, Tailwind, and code Playground

HTML

<textarea cols=80 rows=2 class='test'>the quick brown fox jumps over the lazy dog</textarea>
<textarea cols=80 rows=2 class='test'>the quick brown fox jumps over the lazy dogs</textarea>
<textarea cols=80 rows=2 class='test'>the quick brown foxes jumps over the lazy dogs</textarea>
<input type='text' value='test the input' class='test2'/>

CSS

.ui-limiter-chars{color:blue;border:1px solid grey; margin-left:1em;padding:.5em;position:absolute;}
.ui-state-error-text{color:red;}

JavaScript

$.widget("ui.limiter", {
	options:{
		limiterClass:'ui-limiter-chars ui-widget-content',
		limiterTag:'small',
		maxChars:100,
		warningClass:'ui-state-error-text',
		warningChars:90,
		wrapperClass:'ui-limiter-wrapper ui-widget',
		tagName:'TEXTAREA'
	},
	_create: function(){
		// make sure that the widget can only be called once and it is only called on textareas
		var o = this.options;
		if (($(this).attr('aria-owns') === undefined ) && (this.element[0].tagName === o.tagName)) {
			var self = this;
			var id = Math.random().toString(16).slice(2, 10).replace(/(:|\.)/g, '');
			// ids = array of id of textarea, wrapper, and limiter chars ids.
			this.ids = [(this.element.attr('id') || 'ui-limiter-' + id),'ui-limiter-wrapper-'+id,'ui-limiter-chars-'+id];
			this.element[0].id = this.ids[0];
			var limiterWrapper = $('<div/>',{
				'class':o.wrapperClass,
				'id':this.ids[1]
			});
			// semantically, this seems to be a good fit for a small tag. ie not important.
			var limiterChars = $('<'+o.limiterTag+'/>', {
				'class': o.limiterClass,
				'id': this.ids[2]
			});
			
			$('#'+this.ids[0]).wrap(limiterWrapper);
			$('#'+this.ids[0]).after(limiterChars);
			$('#'+this.ids[0]).attr('aria-owns',this.ids[2]);
			$('#'+this.ids[0]).on("keyup focus", function() {
				self._setCount($('#'+self.ids[0]), $('#'+self.ids[2]));
			});
			this._setCount($('#'+this.ids[0]), $('#'+this.ids[2]));
		}
	},
	_setCount:function (src, elem) {
		var o = this.options;
		var chars = src.val().length;
		if (chars > o.maxChars) {
			src.val(src.val().substr(0, o.maxChars));
			chars = o.maxChars;
		}
		$('#'+this.ids[2]).text(o.maxChars - chars );
		if (chars > o.warningChars)
		{
			$('#'+this.ids[2]).addClass(o.warningClass);
		}
		else
		{
			$('#'+this.ids[2]).removeClass(o.warningClass);
		}
	},
	destroy:...