How to Clone fieldset inside of a Cloned fieldset jQuery

Question

I need to clone a fieldset inside of a cloned fieldset.

So My regular structure is like

When I click add new agenda field it successfully clones bigger field like

But when I click add new file it only adds new field to parent field not to current field

My code is like

<div id="agenda_placeholder">
    <div id="agenda_template">
    <fieldset>
        <legend>Agenda Details</legend>

        <ol>
            <li>
                <label for=topic_name>Topic Name</label>
                <input id=topic_name name=topic_name type=text placeholder="ACAT Briefing" required autofocus>
            </li>
            <li>
                <label for=topic_time>Time</label>
                <input id=topic_time name=topic_time type=text placeholder="2.00 - 2.30 ">
            </li>
            <li>
                <label for=presenter>Presenter</label>
                <input id=presenter name=presenter type=text placeholder="Name LastName">
            </li>


            <li>
            <div id="file_placeholder">
            <div id="file_template">
                <fieldset>
                    <legend>File Details</legend>

                        <ol>
                            <li>
                                    <label for=file_description>File Description</label>
                                    <input id=file_description name=file_description type=file_description placeholder="Ex. Weather Stats">
                            </li>
                            <li>
                                    <label for=file_name>File Name</label>
                                    <input id=file_name name=file_name type=file_name placeholder="Exact file name Eg:weather.docx">
                            </li>
                            </ol>
                        </div> <!-- file_template -->
                     </div> <!-- file_placeholder -->   
                     <button type="button" name="AddNewFile" onclick="Add();">Add New File</button> 
                </fieldset>
            </li>
         </ol>
        </div> <!-- agenda_template -->
    </div> <!-- agenda_placeholder -->
        <button type="button" name="AddNewAgenda" onclick="Add_Agenda();">Add New Agenda Field</button>
    </fieldset>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
        var _counter = 0;
function Add() {
    _counter++;
    var oClone = document.getElementById("file_template").cloneNode(true);


    oClone.id += (_counter + "");
    document.getElementById("file_placeholder").appendChild(oClone);
}

function Add_Agenda() {
    _counter++;
    var oClone = document.getElementById("agenda_template").cloneNode(true);
    oClone.id += (_counter + "");
    document.getElementById("agenda_placeholder").appendChild(oClone);
}

So how can I clone a fieldset inside of a cloned field set?

Answer 1

first, your html is invalid it has tags overlapping

in your add function the statement document.getElementById("file_placeholder") will return the first match of id file_placeholder , and that is incorrect.

what you need is to know which button was clicked and clone its parent div and append the cloned div to the grandparent div of the button.

the same logic can be applied to Add_agenda but you should note to remove added files to the agenda you are cloning.

function Add(btn) {
     _counter++;
    var parentFileTemplate = $(btn).parent("div");
    parentFileTemplate.attr('id',"file_template" + _counter );
    var parentFilePlaceHolder = parentFileTemplate.parent();
    cloned = parentFileTemplate.clone();
    cloned.attr('id',"file_template" + _counter );
    parentFilePlaceHolder.append(cloned);
  }

also you must add this as parameter when calling the function:

<button type="button" name="AddNewFile" onclick="Add();">

will be:

<button type="button" name="AddNewFile" onclick="Add(this);">