Textarea-N with recount and disable button function - php

Question

JS
$(document).ready(function(){
$('.comment').bind("blur focus keydown keypress keyup", function(){recountss();});
$('input.comment_button').attr('disabled','disabled');
$('#form').submit(function(e){
tweet();
});
});
function recountss()
{
var maxlen=280;
var current = maxlen-$('.comment').val().length;
$('.counters').html(current);
if(current<0 || current==maxlen)
{
$('.counters').css('color','#D40D12');
$('input.comment_button').attr('disabled','disabled').addClass('inact');
}
else if (!$.trim($(".comment").val()))
{
$('input.comment_button').attr('disabled','disabled').addClass('inact');
}
else
$('input.comment_button').removeAttr('disabled').removeClass('inact');
if(current<10)
{
$('.counters').css('color','#D40D12');
}
else if(current<20)
{
$('.counters').css('color','#5C0002');
}
else
{
$('.counters').css('color','#C0C0C0');
}
HTML
<form method="post" action="" id="form">
<textarea name="comment" class="comment" id="ctextarea<?php echo $msg_id;?>" ></textarea>
<input type="hidden" name="uid" id="uid" value="<?php echo $uid; ?>"/>
<div class="p"></div>
<input type="submit" value="Comment" id="<?php echo $msg_id;?>" class="comment_button"/>
<span class="counters">
280
</span>
</form>
I using jquery.
I have more than 1 textarea, if I type in textarea-1, it work, button disabled if no any text and recount working good.
But if I type in textarea-2, textarea-3, textarea-N, it can't work.
So how can I do to make all works ?
Thank you.

Answer 1

If each <textarea> has its own maxlen=280, it would be better to change from using class - $('.comment') to id - $('#ctextarea-'+i) on all elements - <textarea>, <button>, <span>, etc.
This is untested, but should help point you in the right direction.
$(document).ready(function(){
var i=1;
var numtextarea = 1;
$('#form').find('textarea').each(function(){numtextarea++;} //find number of <textarea>'s
while(i<numtextarea){ // loop through each <textarea>
$('#ctextarea-'+i).bind("blur focus keydown keypress keyup", function(){recountss(i);});
$('#comment_button-'i).attr('disabled','disabled');
}
});
$('#form').submit(function(e){
tweet();
});
});
function recountss(i)
{
var maxlen=280;
var current = maxlen-$('#ctextarea-'+i).val().length;
$('#counters-'+i).html(current);
if(current<0 || current==maxlen)
{
$('#counters-'+i).css('color','#D40D12');
$('#comment_button-'+i).attr('disabled','disabled').addClass('inact');
}
else if (!$.trim($("#ctextarea-'+i).val())) {
$('#comment_button-'+i).attr('disabled','disabled').addClass('inact');
}
else
$('#comment_button-'+i).removeAttr('disabled').removeClass('inact');
if(current<10)
$('#counters-'+i).css('color','#D40D12');
else if(current<20)
$('#counters-'+i).css('color','#5C0002');
else
$('#counters-'+i).css('color','#C0C0C0');
}
And your form should look like -
<form method="post" action="" id="form">
<textarea name="comment" class="comment" id="ctextarea-1" ></textarea>
<input type="hidden" name="uid" id="uid" value="1"/>
<div class="p"></div>
<input type="submit" value="Comment" id="comment_button-1" class="comment_button"/>
<span id="counters-1">
280
</span>
<textarea name="comment" class="comment" id="ctextarea-2" ></textarea>
<input type="hidden" name="uid" id="uid" value="2"/>
<div class="p"></div>
<input type="submit" value="Comment" id="comment_button-2" class="comment_button"/>
<span id="counters-2">
280
</span>
...
<textarea name="comment" class="comment" id="ctextarea-N" ></textarea>
<input type="hidden" name="uid" id="uid" value="N"/>
<div class="p"></div>
<input type="submit" value="Comment" id="comment_button-N" class="comment_button"/>
<span id="counters-N">
280
</span>
</form>