Can't get value of textarea using Javascript

I have a form which is using the SheepIt jQuery plugin, for duplication of form rows. One of the elements in the row is a <select> element. When a certain value is chosen in the select value, a modal (I'm using Fancybox on my site) containing a <textarea> appears, allowing users to provide additional information. My idea was to take this text and add it to the form in a hidden form element, but I can't for the life of me get the text using jQuery. I've tried using .val(), .text(), and .html(), but I keep getting an empty string. I even tried using vanilla Javascript using similar methods to above, but I still can't get it to work. I have a hidden element (<input type="hidden" id="row_id" value="" />) in that same block of HTML and have no problem retrieving it using $("#row_id").val(). Any suggestions?

My Code

HTML

<!-- sheepIt Form -->
    <div id="meta_fields" class="well sheepit-form">
        <!-- Form template-->
        <div id="meta_fields_template" class="sheepit-row">
            <input id="meta_fields_#index#_field_label" name="meta[meta_fields][#index#][field_label]" type="text" placeholder="Field Label" />
            <select id="meta_fields_#index#_field_type" name="meta[meta_fields][#index#][field_type]" class="field-choice">
                <option value="">--Field Type--</option>
                <option value="text">Single Line Text Box</option>
                <option value="textarea">Multi Line Text Box</option>
                <option value="checkbox">Checkbox</option>
                <option value="select">Dropdown List</option>
            </select>
            <input id="meta_fields_#index#_field_id" name="meta[meta_fields][#index#][field_id]" type="hidden" />
            <input id="meta_fields_#index#_field_required" name="meta[meta_fields][#index#][field_required]" value="0" type="hidden" />
            <input id="meta_fields_#index#_field_required" name="meta[meta_fields][#index#][field_required]" value="1" type="checkbox" />
            <label for="meta_fields_#index#_field_required">Required?</label>
            <a id="meta_fields_remove_current" class="item small">
                <i class="icon-remove"></i>
            </a>
        </div>
        <!-- /Form template-->

        <!-- No forms template -->
        <div id="meta_fields_noforms_template">No fields defined!</div>
        <!-- /No forms template-->

        <!-- Controls -->
        <div id="meta_fields_controls" class="sheepit-buttons">
            <span id="meta_fields_add"><button class="btn btn-success btn-small"><i class="icon-plus-sign"></i> <span>Add Row</span></button></span>
            <span id="meta_fields_remove_last"><button class="btn btn-warning btn-small"><i class="icon-remove"></i> <span>Remove Row</span></button></span>
            <span id="meta_fields_remove_all"><button class="btn btn-danger btn-small"><i class="icon-trash"></i> <span>Remove All Rows</span></button></span>
        </div>
        <!-- /Controls -->

    </div>
    <!-- /sheepIt Form -->

    <script type="text/x-handlebars" id="select-options-form">
        <p class="lead">Please provide options for the dropdown list. One option per line</p>

        <div>
            <textarea id="options" style="width:500px;height:200px"></textarea>
            <input type="hidden" id="row_id" value="" />
        </div>

        <div class="pull-right">
            <button class="btn btn-success closeModal">
                <i class="icon-ok"></i>
                Complete
            </button>
        </div>
    </script>

NOTE: This is not a true Handlebars template. I'm using the <script> tag to hold the HTML fragment that is inserted into the modal. I wasn't sure if having a div with style="display:none" was causing JS to think that there were two elements in the page (that was my original markup).

Javascript

// called from <select> event handler
function checkFieldList(e)
{
    e.preventDefault();

    var value = $(this).val();

    if(value !== 'select') {
        // TODO: do some processing here
        return false;
    }

    // get the sheepIt row id -- easiest by parsing out the element ID
    var row_id = parseInt($(this).prop("id").split("_")[2], 10);

    return openModal(row_id);
}

function openModal(row_id)
{
    // load in content and open in modal
    var modalContent = $("#select-options-form");
    modalContent.find("#row_id").val(row_id);

    $.fancybox({
        "width"   : 600,
        "height"  : 300,
        "modal"   : true,
        "content" : modalContent.html(),
        "afterShow" : bindModalClose,
        "beforeClose" : closeModal
    });
}

function bindModalClose() 
{
    $(".closeModal").on('click', function(e) {
        e.preventDefault();

        $.fancybox.close();
    });
}

function closeModal()
{
    //add link after select dropdown and wire an event handler
    var row_id = $("#row_id").val(),
        dropdown = $("#meta_fields_" + row_id + "_field_type");

    addOptionsLink(dropdown, row_id);

     // retrieve content in <textarea>
     // all the following return empty string
     var text = $("#options").val();
     // var text = $("#options").html();
     // var text = $("#options").text();
     // var text = document.getElementById("options").value;
     // var text = document.getElementById("options").innerHTML;
     // var text = document.getElementById("options").innerText;

     console.log(text);

     // 3. insert that content into hidden form field
}

function addOptionsLink(dropdown, row_id)
{
    dropdown.after('<a href="#" class="load_options" data-row-id="' + row_id + '">View Options</a>');

    $(".load_options").on('click', function(e) {
        e.preventDefault();

        return openModal(row_id);
    });
}