JavaScript clone a div but instead of cloning it once at a time, it multiplies

Question

I'm currently working on a quiz management system and creating the frontend for a create quiz page. Usually in question forms you can click on add new question/new answer and a new element showed up. But right now instead of creating one by one it start to multiply.

        <div class="createContainer">
            <form method="post" action="">
                <div id="createTable">
                    <div>
                        <label for="question">Question:</label>
                        <input type="text" name="question"></textarea>
                    </div>
                    <div id="createAnswer">
                        <label for="option">Option:</label>
                        <input type="text" name="option" />
                        <input type="radio" name="isCorrect">
                    </div>
                    <button type="button" class="btn-copy" onclick="duplicateAnswer()">New     Answer</button>
                </div>
                
                <button type="button" class="btn-copy" onclick="duplicateQuestion()">New     Question</button>
                <button type="submit">Create Quiz</button>
            </form>
        </div>
        
        <script>
            function duplicateQuestion() {
                const node = document.getElementById("createTable");
                const clone = node.cloneNode(true);
                document.getElementById("createTable").appendChild(clone);
            }

            function duplicateAnswer() {
                const node = document.getElementById("createAnswer");
                const clone = node.cloneNode(true);
                document.getElementById("createAnswer").appendChild(clone);
            }
        </script>

I am new to JS so please enlighten me

Answer 1

You are cloning the complete <div id="createAnswer"> and then appending the clone to that div. So the next time you'll clone it, it will contain the new element.

I suggest cloning the div, but append it after <div id="createAnswer">, not in it.

One way is to keep a reference to the btn-copy, and use insertBefore on the parentElement with the ref to the button to place it right before it.

Same goes for the questions, I've removed that to keep it simple for now.

const insertBeforeElement = document.getElementById("btn-copy");

function duplicateAnswer() {
    const node = document.getElementById("createAnswer");
    const clone = node.cloneNode(true);
    document.getElementById("createAnswer").parentElement.insertBefore(clone, insertBeforeElement);
}

<div class="createContainer">
    <form method="post" action="">
        <div id="createTable">
            <div>
                <label for="question">Question:</label>
                <input type="text" name="question"></textarea>
            </div>
            <div id="createAnswer">
                <label for="option">Option:</label>
                <input type="text" name="option" />
                <input type="radio" name="isCorrect">
            </div>
            <button type="button" id='btn-copy' class="btn-copy" onclick="duplicateAnswer()">New     Answer</button>
        </div>

        
        <button type="submit">Create Quiz</button>
    </form>
</div>