title: JQuery character counter with multiple inputs
body: <p>I found the solution below to a simple textbox character counter (like Twitter).</p>
  
  <p>Rather than use a single textbox, I've been trying to amend the code to accommodate multiple  text inputs without success.</p>
  
  <p>The reason is because I want to validate a URL and text before sending them as the same tweet.</p>
  
  <p>Can anybody point me in the right direction?</p>
  
  <pre><code>&lt;span class="counter"&gt;&lt;/span&gt;
  &lt;input type="text" name="field1" id="field1" class="word_count" /&gt;
  &lt;input type="text" name="field2" id="field2" class="word_count" /&gt;
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>$(document).ready(function () {
      $('.word_count').each(function () {
          var $this = $(this);
          var counter = $this.parent().find('.counter');
          var maxlength = $this.attr('maxlength');
  
          counter.text('Only ' + maxlength + ' characters allowed');
  
          $this.bind('input keyup keydown', function () {
              var value = $this.val();
  
              if (value.length &gt; 0) {
                  counter.text((maxlength - $this.val().length) + ' characters left');
              } else {
                  counter.text('Only ' + maxlength + ' characters allowed');
              }
          });
      });
  });
  </code></pre>