TinyMCE - Keeping textarea values in sync

A simple way of keeping textarea values in sync as edits are made via editor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.1.2/tinymce.min.js"></script>
<div style="width:50%;float:left">
    <label>Text 1</label>
    <textarea name="text1">
        <p>Some text 1</p>
    </textarea>
</div>
<div style="width:50%;float:left">
    <label>Text 2</label>
    <textarea name="text2">
        <p>Some text 2</p>
    </textarea>
</div>
<hr />
<p>Click the button below to display the current values of the hidden textareas</p>
<p><button id="showValues" text="">Show textarea values</button></p>
<div id="values"></div>

CSS

body {
    font-family: arial, helvetica, sans-serif
}
label {
    font-weight: bold
}

JavaScript

$(function () {
    tinymce.init({
        selector: "textarea",
        statusbar: false,
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });

    $('#showValues').click(function () {
        var msg = '';
        $('textarea').each(function (index, ta) {
            var $ta = $(ta);
            msg += '<div><strong>Textarea "' + $ta.attr('name') + '" value:</strong><br />' + $ta.val() + '</div>';
        });
        $('#values').html(msg);
    });
});