Dynamically add textareas with CKEditor

Question

I am trying to create a dynamical form where you can add new 'chapters' clicking to a button up to 10 of them. This would be 'easy', but I also want the text fields to be implementing CKEditor, and I cannot make it work. I got it adding the chapters smoothly, I can only edit the LAST instance of them. Besides, if I edit the last one and click on 'add new chapter', the last one gets deleted. I based my attempt in this thread.

Javascript code I got so far:

num_chapter = 1;
var editor = new Array();

function createEditor()
  {
  if (num_chapter <= 10)
    {
    var num=num_chapter+1;
    document.getElementById('editor').innerHTML += "<br><br><h3 style='display:inline'>Chapter " + num + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num + "' placeholder='Title for chapter " + num + "'><br><br>";    

    // Create a new editor inside the <div id="editor">, setting its value to html
    var config = {};
    editor[num_chapter] = CKEDITOR.appendTo( 'editor' , config, '' );
    }
  else
    {
    document.getElementById('chapters').innerHTML += "<br />Maximum is 10 chapters.";
    }
  num_chapter += 1;
  }

HTML code:

<h3 style='display:inline'>Chapter 1: </h3> <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br>
<textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea>
  <div id="editor">
  </div><br>
  <input type="button" onclick="createEditor(); editing('Chapter 1');" value=" Add chapter ">

As you can see, I attempted to put the editors objects into an array, but it didn't work out. I don't know much Javascript (not to say almost nothing), so any help will be appreciated!

Answer 1

I finally solved it, after 3 or 4 hours in total. It was easier than I thought, but not so elegant. This can be achieved through php and javascript to make it 'slightly' more elegant, but just plain old html and Javascript will also do the trick if you have few text fields.

First, the HTML/PHP:

<h3 style='display:inline'>Chapter 1: </h3> 
  <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br>
  <textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea>
  <?php for ($i=2; $i<=10; $i++)
    echo "<div id='div_editor_".$i."' style='display:none;'><textarea id='editor_".$i."' name='editor".$i."'></textarea></div>"; ?>
  <br><br>
  <input type="button" onclick="createEditor();" value=" Add chapter ">
<br><br>

Realize that it creates all the div, but since there's nothing in them, they don't appear. Then, the Javascript:

num_chapter = 2;
var editor = new Array();

function createEditor()
  {
  if (num_chapter <= 10)
    {
    toggle_visibility('div_editor_' + num_chapter );

    document.getElementById('div_editor_' + num_chapter).insertAdjacentHTML( "afterbegin", "<br><br><h3 style='display:inline'>Chapter " + num_chapter + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num_chapter + "' placeholder='Title for chapter " + num_chapter + "'><br><br>");

    // Create a new editor inside the <div id="editor">, setting its value to html
    CKEDITOR.replace( 'editor_' + num_chapter );

    num_chapter += 1;
    }
  else
    {
    alert("Sorry, maximum is 10 chapters.");
    }
  }

This code will generate 10 chapters properly working with CKeditor. If the 11th is attempted to be created, a warning in a popup is shown. it's important that this line for ($i=1; $i<10; $i++), this num_chapter < 10 and this num_chapter == 10 have all the same value (10 in my case).