如何为动态创建的文本框输入生成不同的名称

Question

我已经使用 jQuery append 在一周中的 7 天动态创建了带有删除按钮的文本框。 我对 7 个附加按钮使用相同的功能，它工作正常，但我需要生成具有不同名称的文本框。

我的意思是如果我点击周日添加按钮文本框名称或 ID 应该是sunday text1 sunday text2 ，其他工作日也是如此，我该怎么做？

<script>
$(document).ready(function() {
    var wrapper         = $(".input_fields_wrap");
    var add_button      = $(".add_field_button");
    var i = 1; 
    $(add_button).click(function(e){ 
        e.preventDefault();
        i++;
            $(this).parent().append('<div><label class="titlesmall-font">From time</label><input type="text" class="form-control"/><label class="titlesmall-font"> To Time</label><input type="text" class="form-control" /><label class="titlesmall-font">Price</label><input type="text" class="form-control" /><input type="button" class="btn btn-danger remove_field padding-top-5 delete"  style="margin-top:5px; margin-left:4%;" value="Delete"></div><div class="clearfix"></div>'); 
    });
    
    $(wrapper).on("click",".remove_field", function(e){ 
        e.preventDefault(); $(this).parent('div').remove(); i--;
    })
});
</script>

Answer 1

观察以下变化，

var $wrapper         = $(".input_fields_wrap");
var $add_button      = $(".add_field_button");

$add_button.click(function(e){ 
    e.preventDefault();
    i++;
    $(this).parent().append('<div><label class="titlesmall-font">From time</label><input type="text" class="form-control"/><label class="titlesmall-font"> To Time</label><input type="text" class="form-control" /><label class="titlesmall-font">Price</label><input type="text" class="form-control" /><input type="button" class="btn btn-danger remove_field padding-top-5 delete"  style="margin-top:5px; margin-left:4%;" value="Delete"></div><div class="clearfix"></div>'); 
});

$wrapper.on("click",".remove_field", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); i--;
});

作为，

$wrapper和$add_button已经是 jQuery 对象，因此无需再将其包裹在$