Get next textarea outside div without id

Question

I need to get the next textarea, but I'm not being able with next or even find.

Sample code HTML:

<div>
    <div class="guides_chapters_button" onclick="surroundtest('[center]', '[/center]');">Center</div>
    <div class="guides_chapters_button" style="text-decoration: underline;" onclick="surround('[u]', '[/u]');">u</div>
</div>
<textarea class="guides_chapters_textarea" id="textareamatch" name="matchupm" rows="7" cols="25"></textarea>

JS:

window.surround = function surround(text2,text3){
$("#textareamatch").surroundSelectedText(text2, text3);
}
function surroundtest(text2,text3){
var c = $(this).parent().next('textarea');
c.surroundSelectedText(text2, text3);
}

JS FIDDLE: http://jsfiddle.net/qmpY8/1/

What I need working is surroundtest, the other is an example working but using the id. I would love to replace that one because Im usinc cloned objects.

Answer 1

The this statement in surroundtest applies to the window object and not the element. What you should do is to change the function definition as so:

function surroundtest(element, text2,text3){
    var c = $(element).parent().next('textarea');
    ...
}

And the HTML accordingly:

<div class="guides_chapters_button" onclick="surroundtest(this, '[center]', '[/center]');">Center</div> 

Answer 2

If this is the HTML you are going with, then .closest() can also be used to get the textarea element.Like below:

var c = $(element).parent().closest('textarea');