Jquery 用户选择文件和按钮后动态添加输入

我这里有一个场景

1） 我有一个照片包装器，用户可以从电脑中选择img文件。用户选择文件后，它将显示预览img以及照片标题输入

预览img、删除按钮和照片标题输入在页面加载时不显示

2） 完成第一步后，如果有更多图像，我将单击添加按钮。它将重复完全相同的步骤1

现在发生的实际情况是：

如果我点击Add按钮，它将添加1。但是如果我第二次单击，它将添加2而不是1

下面是我的代码：

<div class="trip-ul-photo">
    <div class="trip-ul-photo-wrapper clearfix">

  <!-- This part 1 is the input file + label + preview img + delete button, preview img and button will display none until user have select their img file from their computer -->
        <div class="trip-ul-photo-group col-lg-12">
            <input id="trip-photo1" type="file" class="" name="trip-photo[]">
            <label for="trip-photo1"></label>
            <img class="pro-set-up-photo-preview" src="" alt="Trip Photo 1" />
            <button type="button" class="btn btn-link btn-photo-del" role="button">X</button>
        </div>
    <!-- End of part 1 -->

    <!-- This part 2 is to generate the photo caption dynamically when the user have select their img file from their computer -->
        <div class="trip-ul-photo-cap-wrapper"></div>
    <!-- End of part 2 -->

    </div>
</div>

<!-- When user clicks on this button, it will add in the Part 1 and Part 2 dynamically -->
<button type="button" class="btn btn-default btn-trip-ul-photo" role="button">Add Photo +</button>

X
添加照片+

我的JS不是很好，所以我的代码可能很混乱

---

提前谢谢各位

我没有通读您的全部代码，但乍一看，您似乎在单击事件处理程序之外定义了

photo\u str

，但在完成之前/之后没有重置它，因此它的值将保留在您下次输入单击处理程序时。在单击事件处理程序的开始或结束处设置

photo_str=”“

。或者将其定义移动到处理程序中。我明白了！谢谢你的帮助！我没有通读您的全部代码，但乍一看，您似乎在单击事件处理程序之外定义了

photo\u str

，但在完成之前/之后没有重置它，因此它的值将保留在您下次输入单击处理程序时。在单击事件处理程序的开始或结束处设置

photo_str=”“

。或者将其定义移动到处理程序中。我明白了！谢谢你的帮助！