jQuery Forum

Hi all

I'm trying to add extra DIVs after the first one on a page. This is for a CMS with form fields in them. Here is the first DIV:

1. <div class="OptExtra">
2.     <h3>Additional Option</h3>
3.     <label for="RESAddType">File type (i.e. &ldquo;CD&rdquo; or &ldquo;Download&rdquo;)</label>
4.     <input name="RESAddType[]" type="text" id="RESAddType" size="48" class="FW" />
5.     <label for="RESAddTitle">File title (i.e. &ldquo;Boxed Set of 4 CDs&rdquo;)</label>
6.     <input name="RESAddTitle[]" type="text" id="RESAddTitle" size="48" class="FW" />
7.     <label for="RESAddFType">File format (As &ldquo;MP3&rdquo; // &ldquo;WORD&rdquo; // &ldquo;PDF&rdquo;)</label>
8.     <input name="RESAddFType[]" type="text" id="RESAddFType" size="48" class="FW" />
9.     <label for="RESAddPrice">File price (Enter as &ldquo;6.99&rdquo; &ndash; <strong>NO &ldquo;&pound;&rdquo; SIGN!</strong>)</label>
10.     <input name="RESAddPrice[]" type="text" id="RESAddPrice" size="48" class="FW" />
11.     <label for="RESAddFName">File name</label>
12.     <input name="RESAddFName[]" type="text" id="RESAddFName" size="48" class="FW" />
13.     <label for="RESAddTxt">File text</label>
14.     <textarea name="RESAddTxt[]" id="RESAddTxt" cols="70" rows="50" class="mceAdvanced"></textarea>
15.     <input type="button" value="Add another option" class="SubmitButton" onclick="inserter()" />
16.     <hr />
17. </div>

The script I have is thus:

1. <script type="text/javascript">
2.     function inserter()
3.     {
4.         $("<div class='OptExtra'><h3>Additional Option</h3><label for='RESAddType'>File type (i.e. &ldquo;CD&rdquo; or &ldquo;Download&rdquo;)</label><input name='RESAddType[]' type='text' id='RESAddType' size='48' class='FW' /><label for='RESAddTitle'>File title (i.e. &ldquo;Boxed Set of 4 CDs&rdquo;)</label><input name='RESAddTitle[]' type='text' id='RESAddTitle' size='48' class='FW' /><label for='RESAddFType'>File format (As &ldquo;MP3&rdquo; // &ldquo;WORD&rdquo; // &ldquo;PDF&rdquo;)</label><input name='RESAddFType[]' type='text' id='RESAddFType' size='48' class='FW' /><label for='RESAddPrice'>File price (Enter as &ldquo;6.99&rdquo; &ndash; <strong>NO &ldquo;&pound;&rdquo; SIGN!</strong>)</label><input name='RESAddPrice[]' type='text' id='RESAddPrice' size='48' class='FW' /><label for='RESAddFName'>File name</label><input name='RESAddFName[]' type='text' id='RESAddFName' size='48' class='FW' /><label for='RESAddTxt'>File text</label><textarea name='RESAddTxt[]' id='RESAddTxt' cols='70' rows='50' class='mceAdvanced'></textarea><input type='button' value='Add another option' class='SubmitButton' onclick='inserter()' /></div><hr />").insertAfter(".OptExtra");
5.     }
6. </script>

The problem is it duplicates all the previous DIVs that have been added. For instance by clicking the "Add another option" button when 1 DIV shows produces 2 DIVs. Click the button again and 4 DIVs appear, click again and 8 DIVS appear. Basically it inserts all the DIVs that are already on the page.

So basically I have three issues:

1. I want to be able to click the button and only 1 DIV is added at a time.
2. I want the H3 header to change to "Additional Option 1", "Additional Option 2" etc., when a new DIV is added.
   
3. The TinyMCE editor doesn't work in the additional DIVs created (mceAdvanced textarea class), any ideas why?

Kindest regards in advance
Glynn