title: jquery character countdown in textarea
body: <p>I want to provide a visual to show users how many of the characters remain in a textarea as they type in their response. My code below WORKS! but I kinda pieced the logic together and have A LOT of repetition. Is there a better way to write the jquery below that is more maintainable and succinct?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;td colspan="4" style="text-align:center;"&gt;
       NOTES&lt;br&gt;
       &lt;textarea class="sam_notes maxed" maxlength="750" name="sam_notes" style="height:100px;width:90%;margin:0 auto;"&gt;&lt;/textarea&gt;
       &lt;br&gt;
       &lt;span style="font:normal 11px sans-serif;color:#B00400;"&gt;
           &lt;span class='counter_msg'&gt;&lt;/span&gt;
       &lt;/span&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>(function() {
       $(document).on('focus', '.sam_notes', function(e){
        var msgSpan = $(this).parents('td').find('.counter_msg');
        var ml     = parseInt( $(this).attr('maxlength') );
        var length = $(this).val().length;
        var msg = ml - length + ' characters of ' + ml + ' characters left';
  
        msgSpan.empty().html(msg);
      });
  
      $(document).on('keyup', '.sam_notes', function(e){
        var msgSpan = $(this).parents('td').find('.counter_msg');
        var ml     = parseInt( $(this).attr('maxlength') );
        var length = $(this).val().length;
        var msg = ml - length + ' characters of ' + ml + ' characters left';
  
        msgSpan.empty().html(msg);
      });
  })();
  </code></pre>