JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<textarea rows="10" cols="40" id="smsbody" validate = "required:true" name="MessageBody"></textarea>
<div id='message'>
    <span id='char'>0</span> characters,
    <span id='msgs'>0</span> SMS message(s),
    <span id='remg'>160</span> remaining
</div>

JavaScript

var $chars = $('#char');
var $msgs = $('#msgs');
var $remg = $('#remg');

$('#smsbody').keyup(function(evt) {
    var len = this.value.length;
    $chars.text(len);
    if(len <= 160) {
        $msgs.text(1);
        $remg.text(160 - len);
    } else {
        var multi = Math.ceil((len/153)) ;
        $msgs.text(multi);
        $remg.text((multi * 153) - len);
    }
});