Jquery custom function issues
<p>I'm trying to grab the article elements id value for all the article elements one by one so I can add it to the 
<code>countCharacters() function</code> so I can have a unique character count for each textarea but both my jquery functions dont seem to work correctly. For example my character count should look something like this.</p>

<p><code>countCharacters('#comment-1535 .review-info', '#comment-1535 .review-info + div .count', 5000);</code><br />
<code>countCharacters('#comment-553 .review-info', '#comment-553 .review-info + div .count', 5000);</code><br />
<code>countCharacters('#comment-6547 .review-info', '#comment-6547 .review-info + div .count', 5000);</code></p>

<p>Here is my JSFiddle <a href="https://jsfiddle.net/jm52wg9k/" rel="nofollow">https://jsfiddle.net/jm52wg9k/</a></p>

<p>HTML</p>

<pre><code>&lt;article class="review" id="comment-1535"&gt;
  &lt;div class="review-details"&gt;
    &lt;div class="review-stats"&gt;
      &lt;!-- content --&gt;
    &lt;/div&gt;
    &lt;form method="post" action="" class="review-form"&gt;
      &lt;fieldset&gt;
        &lt;ol&gt;
          &lt;li&gt;&lt;label for="review-info"&gt;Review Info:&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;textarea name="review_info" class="review-info"&gt;&lt;/textarea&gt;&lt;div class="some"&gt;&lt;span class="count"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;  
        &lt;ol&gt;
          &lt;li&gt;&lt;input type="submit" name="submit_review" value="Submit Review" class="submit-review" /&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/article&gt;


&lt;article class="review" id="comment-553"&gt;
  &lt;div class="review-details"&gt;
    &lt;div class="review-stats"&gt;
      &lt;!-- content --&gt;
    &lt;/div&gt;
    &lt;form method="post" action="" class="review-form"&gt;
      &lt;fieldset&gt;
        &lt;ol&gt;
          &lt;li&gt;&lt;label for="review-info"&gt;Review Info:&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;textarea name="review_info" class="review-info"&gt;&lt;/textarea&gt;&lt;div class="some"&gt;&lt;span class="count"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;  
        &lt;ol&gt;
          &lt;li&gt;&lt;input type="submit" name="submit_review" value="Submit Review" class="submit-review" /&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/article&gt;


&lt;article class="review" id="comment-6547"&gt;
  &lt;div class="review-details"&gt;
    &lt;div class="review-stats"&gt;
      &lt;!-- content --&gt;
    &lt;/div&gt;
    &lt;form method="post" action="" class="review-form"&gt;
      &lt;fieldset&gt;
        &lt;ol&gt;
          &lt;li&gt;&lt;label for="review-info"&gt;Review Info:&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;textarea name="review_info" class="review-info"&gt;&lt;/textarea&gt;&lt;div class="some"&gt;&lt;span class="count"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;  
        &lt;ol&gt;
          &lt;li&gt;&lt;input type="submit" name="submit_review" value="Submit Review" class="submit-review" /&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/article&gt;
</code></pre>

<p>Jquery</p>

<pre><code>$(document).ready(function() {
    function countCharacters( input, output, max ) {
        var $input = $(input);
        var $output = $(output);
        $output.text(max + ' characters left');
        $input
            .keydown(function(event) {
                if (event.keyCode != 8 &amp;&amp;
                    event.keyCode != 46 &amp;&amp;
                    $input.val().length &gt;= max)
                    event.preventDefault();
            })
            .keyup(function() {
                var val = $input.val().slice(0, max);
                var left = max - val.length;
                $input.val(val);
                $output.text(left + ' characters left');
            });
    }
    countCharacters(reviewInfo() + '.review-info', reviewInfo() + '.review-info + div .count', 5000);
});

$(document).ready(function(){
     function reviewInfo(){
        var review = $('.review-info').closest('article').attr('id');
        var review2 = '#' + review;
        return review2;
    };
}); 
</code></pre>

<p>CSS</p>

<pre><code>*{
  border: 0;
  margin: 0;
  padding: 0;
}

article{
  margin-top: 1em;  
}

textarea{
  width: 90%;
}

input{
  margin: 1em 0;
  color: #fff;
  background: green;
  padding: .5em;
}
</code></pre>