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

Question

我有一个场景。

1）我有一个照片包装器，用户将从他们的计算机中选择img文件。在用户选择文件后，它将显示预览img以及照片标题输入。

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

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

现在发生的实际情况：

如果我点击添加按钮，它将添加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>

https://fiddle.jshell.net/u1j5bdhp/

我在JS方面不是很好，所以我的代码可能很乱。

先谢谢你们！