如何使用jquery向div添加多个时间？

我有下面的代码，当“浏览”点击时，我想把相同的内容放在div“projectDappe”中，并将“浏览”改为“删除”按钮。我使用以下jquery完成了这项工作

$（文档）.on（“更改”，“idProjectTitle”，函数（e）{
var datatoappend='Browse'；
$（“#txtProjectTitle”）.attr（'占位符'，$（this.val（）.split（'\\'）.pop（））；
var btnDelete='Delete'；
$（'#clearbtn'）.html（''）；
$（'#clearbtn'）。追加（btnDelete）；
$（“#projectdappe”）.append（datatoappend）；
});

项目照片
浏览
您的Html：

    <div id="projectidAppe">
<label for="exampleInputEmail1">Project Photos</label>
<div class="form-group file-uploader">
  <div class="input-group col-xs-12">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-picture"></i>
    </span>
    <input type="text" id="txtProjectTitle-0" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image">
    <div id="clearbtn-0" class="input-group-btn">
      <div class="browse btn btn-primary">
        <i class="glyphicon glyphicon-search"></i> Browse
        <input type="file" accept="image/*" class="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file">
      </div>
    </div>
  </div>
</div>
</div>
</div>


项目照片
浏览

你的JS：

    var count = 1;
$(document).on("change", ".idProjectTitle", function(e) {
  var datatoappend = ' <div class="form-group file-uploader"><div class="input-group col-xs-12"><span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span><input type="text" id="txtProjectTitle-'+count+'" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div id="clearbtn-'+count+'" class="input-group-btn"><div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" accept="image/*" class="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"></div></div></div></div>';
  $("#txtProjectTitle-"+(count-1)).attr('placeholder', $(this).val().split('\\').pop());
  var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>';
  $('#clearbtn-'+(count-1)+' .browse').css('display','none');
  $('#clearbtn-'+(count-1)).append(btnDelete);
  $("#projectidAppe").append(datatoappend);
  count ++;
});
$(document).on("click", "#idImgDelete",function(){
    $(this).parentsUntil(".form-group.file-uploader").remove();
});

var计数=1；
$（文档）.on（“更改”，.idProjectTitle），函数（e）{
var datatoappend='Browse'；
$（“#txtProjectTitle-”+（count-1））.attr（'占位符'，$（this.val（）.split（'\\'）.pop（））；
var btnDelete='Delete'；
$（'#clearbtn-'+（count-1）+'.browse'）.css（'display'，'none'）；
$（'#clearbtn-'+（count-1））.append（btnDelete）；
$（“#projectdappe”）.append（datatoappend）；
计数++；
});
$（文档）。在（“单击”，“idImgDelete”，函数（）上）{
$（this.parentsUntil（“.form group.file uploader”）.remove（）；
});
第二次图像名称未绑定到文本框内。@AbhiJA-id仅绑定到具有该id的第一个元素。请使用类来代替#idImgDelete，.idImgDelete立即工作删除。但创建的第二行的工作方式与第一行不同。如何在每一新行上绑定每个文件名？@AbhiJA-我编辑了我的评论。。。在html中也做了一些更改。使用您的id=“clearbtn”…先生，是的，它正在工作，但“txtProjectTitle”没有分别将图像名称设置为占位符。重复的
id
属性是无效的html。改用类名。由于动态添加元素，因此需要使用