入力フォーム毎コピーを作成する方法について…

HTML

出力するためのテンプレートと出力するエリアを作成します。

<div id="displayArea">
    <!--  ここに出力  -->
</div>

<button id="addButton">Add</button>

<div id="templateForm" class="NotDisp">
  <input type="text" name="templateTextbox">
  <button name="testButton">TEST</button>
  <span class="dispInfo"></span>
  <button name="removeButton">REMOVE</button>
</div>

CSS

テンプレート部分は非表示にしておく為に「display:none;」を指定しておきます。

.notDisp {
  display:none;
}

jQuery

結構長ったらしく書いていますが、順に説明すると…

1. テンプレートからコピーを作成する。
2. コピーしたデータから非表示用のクラスを削除する。
3. コピーしたデータのテキストボックスへidを追加する。
4. コピーしたデータのボタンへクリック時のイベントを追加する。
5. コピーしたデータのボタンへidを追加する。
6. 表示用のエリアに追加する。

$(function(){
    var idNo = 1;
    
    // 追加ボタン押下時イベント
    $('button#addButton').on('click',function(){
        $('div#templateForm')
            // コピー処理
            .clone(true)
            // 不要なID削除
            .removeAttr("id")
            // 非表示解除
            .removeClass("notDisp")
            // テキストボックスのID追加
            .find("input[name=templateTextbox]")
            .attr("id", "textbox_" + idNo)
            .end()
            // ボタンのID追加
            .find("button[name=templateButton]")
            .on('click',function(){alert($(this).attr('id'));})
            .attr("id", "button_" + idNo)
            .end()
            // 情報表示
            .find("span.dispInfo")
            .text("id[" + idNo + "] TextBox_ID[" + "textbox_" + idNo + "] Button_ID:[" + "button_" + idNo + "]")
            .end()
            // 追加処理
            .appendTo("div#displayArea");
  
        // ID番号加算
        idNo++;
    });
  
    // 削除ボタン押下時イベント
    $('button[name=removeButton]').on('click',function(){
        $(this).parent('div').remove();
    });
    
    // 削除ボタン押下時イベント
    $('button[name=removeButton]').on('click',function(){
        $(this).parent('div').remove();
    });
});

実際の動作

See the Pen zpVoBx by miko (@miko3) on CodePen.

テキトーに書いたコードなので簡潔かつ綺麗に書けそう…