How to get this jQuery script to run individually on more than one element
<p>I'm not sure if the title is correct. I can't seem to express this problem properly in words!</p>

<p>I have the following text fields in my HTML that I'm trying to limit the number of characters that can be entered into:</p>

<pre><code>&lt;div class="limited limit-200"&gt;
    &lt;div class="label"&gt;
        &lt;label for="_je_industries_desc"&gt;Industry Description&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="input"&gt;
        &lt;textarea class="large-text" name="industries_desc" id="industries_desc" cols="60" rows="3"&gt;&lt;/textarea&gt;
        &lt;p id="industries_desc_description" class="description"&gt;Put a short description of this industry.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="limited limit-100"&gt;
    &lt;div class="label"&gt;
        &lt;label for="_je_seo_description"&gt;Meta Description&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="input"&gt;
        &lt;textarea class="large-text" name="seo_description" id="seo_description" cols="60" rows="3"&gt;&lt;/textarea&gt;
        &lt;p id="seo_description_description" class="description"&gt;Put a short description of the content of this page.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here's my jQuery so far.
It gets the character limit from the class name in the HTML <code>limit-200</code> for example. Then calculates the amount of characters left as you type and outputs the remaining characters under the textarea.</p>

<pre><code>jQuery(document).ready(function(){
    jQuery('.limited').each(function() {
        // Get the class names of any element that has the class .limited
        var className = jQuery(this).attr('class');

        // Use regex to capture the character limit class (limit-#)
        var limit = className.match(/[?:limit-](\d+)/);

        // Set the limit var to the match from the regex
        var limit = limit[1];

        // Calculate the number of characters that are still available (limit - characters in field)
        var chars_left = limit - jQuery('textarea', this).val().length;

        //alert(chars_left);

        // Attach an event handler to each textarea with the class .limited
        jQuery('textarea', this).on('keyup', function() {
            var maxchar = limit;
            var cnt = jQuery(this).val().length;
            var remainingchar = maxchar - cnt;
            if(remainingchar &lt; 0){
                jQuery('#limit-counter span').html('&lt;strong&gt;0&lt;/strong&gt;');
                jQuery(this).val(jQuery(this).val().slice(0, limit));
            } else {
                jQuery('#limit-counter span').html('&lt;strong&gt;' + remainingchar + '&lt;/strong&gt;');
            }
        });

        // Display number of characters left
        jQuery('textarea', this).after('&lt;span id="limit-counter"&gt;Remaining characters: &lt;span&gt;&lt;strong&gt;' + chars_left + '&lt;/strong&gt;&lt;/span&gt;&lt;/span&gt;');
    });
});
</code></pre>

<p>This works great for a single textarea but if I have more than one and type in one of the textareas the other textarea updates its counter with the same value as the one I'm typing in.</p>

<p>Could someone please help me spot what I'm doing wrong? Hopefully I'm just missing something simple somewhere!</p>

<p>Thanks!</p>
