Javascript 分别更改相似的附加元素

我正在做一件事，根据你给它的文本/文本字段/下拉选择创建一个表单。当我一次创建两个下拉列表时，我不知道如何以计算机可以分辨出这两个元素不相同的方式进行书写，特别是在我的下拉列表生成器中添加新输入时，它无法区分多个下拉列表

下面是我用于它的Javascript函数

$('#submit').on('click', function() {
    $("select").each(function() {
        switch($(this).val()) {
            case "text":
                $("#form").append('<p><input type="text"/> <button class="remInput">Remove</button></p>');
                break;
            case "note":
                $("#form").append('<p><textarea></textarea> <button class="remInput">Remove</button></p> ');
                break;
            case "dd":
                $("#form").append('<p><select id="ddFinal"><option></option></select> <button class="remInput">Remove</button></p>');
                $("#ddCreator").append('<button id="ddAddInput">Add Another Field</button> <p class="ddP"><input type="text" name="ddText"/></p> <button id="ddSubmit">Submit</button>');

                break;
        }       
    });
    $('#inputDiv').empty();
    $('#ddAddInput').on('click', function() {
        $("p[class*='ddP']").append('<input type="text" name="ddText"/>');     
    });
    $('#ddSubmit').on('click', function() {
        $("input[name*='ddText']").each(function() {
                $('#ddFinal').append('<option>'+$(this).val()+'</option>');
        });
        $('#ddCreator').empty();
        $('#ddFinal').removeAttr('id');
    });
});

问题在于DDADInput函数，因为它没有在多个p class=ddp元素之间指定，但我不确定应该放什么。希望这个问题有意义

---

这是我目前正在处理的问题，这个方法有几个缺陷需要纠正

第一：-根据定义，元素Id在页面中是唯一的。改用类

接下来，将从另一个事件处理程序中添加事件处理程序。如果要将所有ID更改为事件处理程序中的类和相应的选择器，那么最终将复合事件

复合事件的意思是，如果将同一个处理程序添加到元素两次，它将触发两次

使用事件委派会更容易。在“提交”的当前单击处理程序之外设置事件委派

现在，关于如何处理实例，在每个事件处理程序中，这是作为事件目标的元素。 使用$this和jQuery遍历方法，您可以处理目标的父级和同级或任何需要执行的操作

我建议您将每个级别包装在一个容器中，以简化遍历。我将调用容器类行，以便来自事件目标的一般遍历可以如下所示：

var someField=  $(this).closest('.row').find('.someField');

单击“删除”按钮时，只需删除父行即可

var someField=  $(this).closest('.row').find('.someField');