Creating multiple fckeditor problem

Hi,

I have got a problem when creating more than 1 extra fckeditors on my page.

Here is the story. I am writing a system where people can write something on my page. Whenever they want a new paragraph on their page they click on add paragraph and a new fckeditor appears (and a text input field for the title and date etc.).

When the page is loaded I have allready created 1 fck editor to start with. When I click on the "add paragraph" button a new fckeditor appears. (nothing wrong with it just yet). Every character I wrote in the first fckeditor still is in the first fckeditor.

But when I add a third fckeditor the trouble starts. When I create a third fckeditor the second and third (new) fckeditor are empty?? The first fckeditor still contains every character.

This is my code:

function addParagraph()
{
   var numberOfParagraph = document.getElementById('NOP');
   var div = document.getElementById("new_paragraph");
         
   var newFCKEditName = 'contentParagraph'+(parseInt(numberOfParagraph .value) + 1);          
   numberOfContents.value = parseInt(numberOfParagraph .value) + 1;         
   var div = document.getElementById("new_paragraph");
   var fck = new FCKeditor(newFCKEditName, 740, 200, 'Basic');
   
        div.innerHTML += '<table cellspacing="0" cellpadding="0"><tr><td class="add_vac_optie_titel">Paragraph Titel:</td><td><input type="text" name="paragraphTitle[]" value=""></td></tr><tr><td colspan="2">'+fck.CreateHtml()+'</td></tr><tr><td colspan="2"><input type="button" value="add paragraph." onClick="addParagraph()"></td></tr></table>';

}

And the HTML looks like this:

<td colspan="2">
   <table cellspacing="0" cellpadding="0">
      <tr>
         <td class="add_vac_optie_titel">Paragraph Title:</td>
         <td><input type="text" name="paragraphTitle[]" value=""></td>
      </tr>
      <tr>
         <td colspan="2">
         <textarea name="contentParagraph[]" rows="5" cols="80" id="contentParagraph1"></textarea>                     
         </td>
      </tr>               
      <tr>
         <td colspan="2"><input type="button" value="add paragraph" onClick="addParagraph()"></td>
      </tr>
   </table>
        <div id="new_paragraph" width="500px"></div>
</td>

I hope that somebody can help me.

This is what I have allready tried:
- When the add paragraph button has been pressed I get every posted html. (oEditor.getHtml()). I empty the innerHtml of the div. Next I fill the div with the fckeditors including the posted html. This was no succes. Whenever I tried to create more than 2 fckeditors the script block and i couldn't add nothing.

Thanks in advance

Randy Cillekens