Javascript handling multiple IDs - php

Question

I'm completely new in javascript. The problem is, I have multiple textarea and div which 'echo'-ed out via PHP with ID (for example textarea_1,textarea_2...), and I wanna do something like, when the textarea is on focus, only that particular textarea which being focussed will slide down and expand.
Html
<textarea id="comment_textarea_1"></textarea>
<div id="button_block_1"><button type="submit">Submit</button><button type="submit" id="cancel_1">Cancel</button></div>
<textarea id="comment_textarea_2"></textarea>
<div id="button_block_2"><button type="submit">Submit</button><button type="submit" id="cancel_2">Cancel</button></div>
Javascript
$(document).ready(function () {
var $this = $(this);
var $textareaID = $this.attr("id").replace("comment_textarea_");
var $buttonblockID = $this.attr("id").replace("button_block_");
var $cancelID = $this.attr("id").replace("cancel_");
var $textarea = $('#'+$(textareaID));
var $button = $('#'+$(buttonblockID));
var $cancel = $('#'+$(cancelID));
$textarea.focus(function(){
$textarea.animate({"height": "85px",}, "fast" );
$button.slideDown("fast");
return false;
});
$cancel.click(function(){
$textarea.animate({"height": "18px",}, "fast" );
$button.slideUp("fast");
return false;
});
});
Thank you!

Answer 1

I explained it in the code. Try this.
$(document).ready(function () {
// select all the textareas which have an id starting with 'comment_textarea'
var $textareas = $("textarea[id^='comment_textarea']");
$textareas.on("focus",function(){
// now $(this) has the focused element
$(this).animate({"height": "85px",}, "fast" );
// find the button block of this div and animate it
$("div[id^='button_block']",$(this)).slideDown("fast");
});
$textareas.on("focusout",function(){
// now $(this) has the focused out element
$(this).animate({"height": "18px",}, "fast" );
// find the button block of this div and animate it
$("div[id^='button_block']",$(this)).slideUp("fast");
});
});

Answer 2

I believe I understand what you're attempting. Please let me know if the following is the effect you're after:
$("[id^='comment_textarea_']").on({
focus: function(){
$(this).stop().animate({ height: '85px' }, 750).next().slideDown();
},
blur: function(){
$(this).stop().animate({ height: '20px' }, 250).next().slideUp();
}
});​
Fiddle: http://jsfiddle.net/pwype/2/

Answer 3

I'm confused. The above answers are concentrating on using ID's... The last time I checked this is one of the main reasons we have the class attribute?
For example:
$(document).ready(function()
{
$('.comment-textarea').focus(function()
{
$(this).animate(
{
'height' : '85px'
}, 'fast');
$(this).next('.button-block').slideDown('fast');
}).blur(function()
{
$(this).animate(
{
'height' : '18px'
}, 'fast');
$(this).next('.button-block').slideUp('fast');
});
});
And the HTML:
<textarea id="comment_textarea_1" class="comment-textarea"></textarea>
<div id="button_block_1" class="button-block"><button type="submit">Submit</button><button type="submit" id="cancel_1">Cancel</button></div>
<textarea id="comment_textarea_2" class="comment-textarea"></textarea>
<div id="button_block_2" class="button-block"><button type="submit">Submit</button><button type="submit" id="cancel_2">Cancel</button></div>
And a little fiddle to show it working:
http://jsfiddle.net/ngYMh/