JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Sysadmin Word Counter</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

		<script src="js/jscript.js"></script>
		<link rel="stylesheet" href="css/css-style.css" />
	</head>
	<body>
		<div id="sys-mbox">
			<textarea id="sys-tbox"></textarea>
		</div>
		<div class="sys-results">
		Total number of words: <span class="words"> </span>
		Total number of chars: <span class="character"> </span>
		</div>
	</body>
</html>

CSS

#sys-tbox {
    background: Orange;
}

JavaScript

$(function() {
	$("#sys-tbox").each(function() {
		var input = '#' + this.id;
		counter(input);
		$(this).keyup(function() {
			counter(input);
		});
	});
});

function counter(field) {
	var number = 0;
	var text = $(field).val();
	var word = $(field).val().split(/[ \n\r]/);
	words = word.filter(function(word) {
        return word.length > 0
    }).length;
		$('.words').text(words);
		$('.character').text(text.length);
}