Character Counter with a dynamic limit using jQuery .each()
<p>This question is an extension of <a href="http://stackoverflow.com/questions/13959314/jquery-character-counter-using-class">jQuery Character Counter using class?</a>.</p>

<p>I would like to add a <code>data-content="####"</code> to my textarea field and then use jQuery to pull out the numerical value and apply that to the character counter limiter.</p>

<p><code>&lt;textarea id="field1" class="input-xlarge limitChars" data-content="2000" rows="2" name="field1"&gt;</code> this field would have a limit of 2000 chars</p>

<p><code>&lt;textarea id="field2" class="input-xlarge limitChars" data-content="1000" rows="2" name="field2"&gt;</code> this field would have a limit of 1000 chars</p>

<p><code>&lt;textarea id="field3" class="input-xlarge limitChars" data-content="1500" rows="2" name="field3"&gt;</code> and this one would be 1500 chars.</p>

<p>From my other question's solution (see solution below), I'm assuming I'd need to pull out the data-content from the DOM and then apply that to the goal.  I just don't know how to pull out the value from data-content and would appreciate some help. </p>

<pre><code>$(document).ready(function(){
    $(".limitChars").each(function() {
        $(this).counter({
            goal: 500
        });
    });
});
</code></pre>

<p>=====================================================<br>
With the extended dialog that occurred, I thought it might be helpful to show what I actually ended up with:</p>

<p>HTML</p>

<pre><code>&lt;textarea id="field1" class="input-xlarge" counter-limit="2000" rows="2" name="field1"&gt; this field would have a limit of 2000 chars
</code></pre>

<p>JavaScript/jQuery</p>

<pre><code>$("[data-counter-limit]").each(function() {
      var $this = $(this), limit = +$(this).data("counter-limit");
      $this.counter({
        goal: parseInt(limit,10)
        //  goal: limit
      });
});
</code></pre>
