JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://static.tinymce.com/tinymce/js/4.0b1/tinymce.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">
<textarea class="wp-editor-area"></textarea>
<textarea class="wp-editor-area"></textarea>
<div id="EditorsContainer"></div>
<button id="wisSW_AddNewEditorButton" name="wisSW_AddNewEditorButton">Add a New Editor</button>
</form>
JavaScript
var currentNoOfEditors = $('.mceEditor').length;
var settings = { menubar : false };
//give each a unique ID, TinyMCE will need it later
textareas = $('textarea.wp-editor-area').each( function( i ) {
var id = $(this).attr( 'id' );
if ( !id) {
id = 'mceEditor-' + ( i );
$( this ).attr( 'id', id );
}
settings.selector = "#" + id;
tinymce.init( settings );
});
$("#wisSW_AddNewEditorButton").click(AddNewEditor);
function AddNewEditor(){
htmlSource = '<textarea class="wp-editor-area" id="wisSW_Editor' + currentNoOfEditors + '"></textarea>';
jQuery("#EditorsContainer").append(htmlSource);
settings.selector = "#wisSW_Editor" + currentNoOfEditors;
tinymce.init( settings );
currentNoOfEditors++;
}