title: multiple <textarea> fields with character counter+row limiter
body: <p>This is what I currently have to count down the available characters to the user.
  It can work on multiple textareas I just have to change the id.</p>
  
  <pre><code>function checkTextArea(id,limit){
    if (document.getElementById(id)){
      var txt = document.getElementById(id).value;
      if (txt.length&gt;limit){
        document.getElementById(id).value = txt.substr(0,limit);
      }
      len = document.getElementById(id).value.length;
      if (document.getElementById('count'+id)){
        document.getElementById('count'+id).innerHTML = (limit-len)+" characters remaining.";
      }
    }
  }
  </code></pre>
  
  <p>This is the JS that limits the amount of rows available in the textarea.</p>
  
  <pre><code>$(document).ready(function(){
      var textArea = $('#foo');
      var maxRows = textArea.attr('rows');
      var maxChars = textArea.attr('cols');
      textArea.keypress(function(e){
          var text = textArea.val();
          var lines = text.split('\n');
          if (e.keyCode == 13){
              return lines.length &lt; maxRows;
          }
          else{ //Should check for backspace/del/etc.
              var caret = textArea.get(0).selectionStart;
              console.log(caret);
  
              var line = 0;
              var charCount = 0;
              $.each(lines, function(i,e){
                  charCount += e.length;
                  if (caret &lt;= charCount){
                      line = i;
                      return false;
                  }
                  //\n count for 1 char;
                  charCount += 1;
              });
  
              var theLine = lines[line];
              return theLine.length &lt; maxChars;
          }
      });
  
  });
  </code></pre>
  
  <p>I need to combine these so that I can use the row limit and character count on multiple textareas.</p>