title: Is there a better way of attaching javascript to multiple HTML elements?
body: <p>Apologies for the muddled title - can't find the best way of phrasing this.</p>
  
  <p>I have a textarea and word count as follows:</p>
  
  <pre><code>&lt;textarea class="form-control caption-box" name="caption" id="caption" rows="5"&gt;&lt;/textarea&gt;
  
  &lt;span class="pull-right label label-default count-message" id="count_message"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>And then I show a word count using javascript.</p>
  
  <pre><code>   $('#caption').keyup(function() {
        var text_length = $('#caption').val().length;
        var text_remaining = text_max - text_length;
        $('#count_message').html(text_length+' characters');
      });
  
      var text_length = $('#caption').val().length;
      var text_remaining = text_max - text_length;
      $('#count_message').html(text_length+' characters');
  </code></pre>
  
  <p>I need to add 6 more textareas on the page, all with the word count functionality. I could just recreate the javascript 6 times and change the element identifier but that feels inefficient.</p>
  
  <p>Is there a better way of achieving this?</p>