javascript - フォーム要素を既存のフォームに動的に追加する方法は?

Question

したがって、基本的には、タイトルにあるように、ボタンを含むフォーム要素をフォームに動的に追加する必要があります。

現在、ボタンによって読み込まれるフォームがあります。このフォームは jQuery ポップアップ ボックス内にあります。現在、このフォームの下にボタンがあり、フォームに毎回いくつかの要素を追加する必要があります。このボタンは現在機能していません。これを行う方法がよくわかりません。

これは、この形式で毎回追加する必要があるものです。

Question [text-box]       Dummy 1 [text-box]
                          Dummy 2 [text-box]
                          Dummy 3 [text-box]
                          Correct [text-box]
                          [delete-button]

基本的に、新しい質問が追加され、その横に不正解用の別の 4 つのテキスト ボックスと 1 つの正解が追加されます。その質問を完全に削除するには、その下に削除ボタンも必要です。後ですべての機能を追加しますが、動的な追加と削除が必要です。

これは私が現在持っているものです：

function addNewQuizField()
{
    var counter = 1;
    var limit = 10;
    var quizForm = document.getElementById('newQuizForm');

    if (counter == limit)  
    {
          alert("You have reached the limit of adding " + counter + " questions");
     }
     else 
     {
          var newQuest = document.createElement('div');
          newQuest.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(quizForm).appendChild(newQuest);
          counter++;
     }
}

これはクイズフォームを作成する私の関数です（面倒です、私は知っています）：

function createQuizForm()
{
    var quizForm = '<form name="editForm" id="newQuizForm" method="post" action="createplay.php"><input type=hidden id="dialogid" name="dialogid" value=""><input type=hidden id="dialogtype" name="dialogtype" value=""><input type=hidden id="uid" name="uid" value="<?php echo $userid; ?>"><div>Quiz Name: <input type="text" id="nameEdit" name="nameEdit" value=""></div><div>Embed Code: <textarea id="textEdit" name="textEdit" row="10" cols="50"></textarea></div><input type="submit" class="roundButton upload" value="" /><input name="addNewField" type="button" onClick="addNewQuizField();" /></form>';

    var dialogDiv = document.getElementById('dialog');

    dialogDiv.innerHTML = quizForm;

    OpenNewQuizDialog();
}

すべてのヘルプは大歓迎です!