Javascript JQuery脚本问题

我在主体内部创建了一个按钮，当单击该按钮时，它将创建一个带有关闭图标的文本字段。当单击关闭图标时，它将隐藏文本字段。 第一次一切正常，当我再次单击按钮时，它会创建文本字段，但关闭图标没有响应

    $("#btn1").click(function(){
                        $( "#container" ).find( ".placeholder" ).remove();
                        $( "<div id='dtf'><input type='textfield' id='tf' name='Textfield'></input><input type='image' src='cancel.jpg' alt='Submit' width='15' height='15' id='close1'></input></div>" ).appendTo("#container" );
                        $("<div id='dtf2'><input type='textfield' id='tf2'></input></div>").appendTo("#container2" );
                            $("#close1").click(function(){

                                $("#dtf").hide();
                                $("#dtf2").hide();
                                $("#container").show();
                            });
                });

$（“#btn1”）。单击（函数（）{
$（“#容器”）.find（“.placeholder”）.remove（）；
$（“”）。附加到（“#容器”）；
$（“”）。附加到（“#容器2”）；
$（“#关闭1”）。单击（函数（）{
$（“#dtf”）.hide（）；
$（“#dtf2”）.hide（）；
$（“#容器”）.show（）；
});
});

每次单击“btn1”时都会添加标记，这会创建重复的ID，这可能会导致选择器崩溃。也许可以尝试将div放在标记中，但使用CSS隐藏

CSS:

HTML:

更整洁的做法是有一个按钮，可以调用“切换”，并在单击打开/关闭时重新命名自己

---

请看小提琴，它要短得多，也简单得多。

我假设您正在尝试创建“字段生成器”，以便可以创建多个文本字段，您不应该在此处使用#id，仅使用类别/属性。在DOM中，只能有一个具有特定名称的id。也许是这样。

---

尝试使用类。并尝试生成可重用的代码。

您也可以共享html吗

.collapsable {
    display: none;
}

<div id="container">
    <div id='dtf' class="collapsable"> [snip the inputs etc] </div>
    <div id='dtf2' class="collapsable"> [snip] </div>
</div>

$("#btn1").click(function(){
    $("#dtf").show();
    $("#dtf2").show();         
});

$("#close1").click(function(){
    $("#dtf").hide();
    $("#dtf2").hide();         
});