JQuery OK and Cancel Functions in Modal Textarea

I am working to create functional OK and Cancel buttons for a variable number of modal textareas on a page.

The HTML would look something like this:

<a href="#00001_Modal" class="modal">note</a> 
        <div id="00001_Modal" class="window bgiframe"> 
            <h3>Notes for Print Speed:</h3>
            <textarea name="00001_NoteText" id="00001_RealTextArea" class="rlTb"></textarea>
            <textarea name="00001_TempNoteText" id="00001_TempTextArea" class="rte"></textarea>
            <a href="#" class="close-modal cancelBtn">Cancel</a>
            <a 开发者_StackOverflow中文版href="#" class="close-modal doneBtn">Done</a>
        </div>  

I already have the modal functions I need, but the populating is proving difficult. The behavior I am trying to attain before I close the modal is:

• "Cancel" anchor clears the editable (second) textarea
• "Done" anchor takes entry from editable textarea and puts it into the real (first) textarea

Also, the editable textarea should populate with the contents of the real textarea when the modal is opened.

I've gone down this JQuery rabbit hole of finding the anchors respective parents, but am having trouble selecting the textarea children of said parents.

This: alert(($(this).parent()[0].id)>("textarea"):nth-child[1];

is obviously dumb and doesn't do anything and makes me feel like I am making this more complicated than it needs to be.

There has got to be a simple way to get this done, right?

It could be done with closest() function. Here is example:

$('.cancelBtn').click(function(){
    $(this).siblings('.rte').val('');
    return false;
});

$('.doneBtn').click(function(){
    $(this).siblings('.rlTb').val( $(this).siblings('.rte').val() );
    return false;
});

Here sample on jsfiddle.net