多圖上傳的 append 添加？以及 attr src 的取代？

Question

我寫了一個當使用者上傳圖片選擇完之後

$('input[type=file]').change(function() {
      var input = $(this);
      if(!!this.files && !!this.files[0]) {
        var reader = new FileReader();
      reader.onload = function(e) {
          $('#pre' + input.prop('id').substr(4,2)).prop('src', e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    }
  });

會直接反映到 #preXX 裡面直接顯示出來

<input type="file" id="file01" name="" class="" accept="image/jpeg, image/png, image/jpg">
<img src="" id="pre01" class="">

只是現在遇到一個問題
我現在需要一個 jquery append 的功能
可以添加無數個上傳
但這樣我的 file01 就無法使用了
請問大神，該怎麼處理這個問題？
以及我要增加這個添加功能
等於是這一坨都要丟到裡面（還有更多）

<input type="file" id="file01" name="" class="" accept="image/jpeg, image/png, image/jpg">
<img src="" id="pre01" class="">

可能會變這樣：

$("select").append('<input type="file" id="file01" name="" class="" accept="image/jpeg, image/png, image/jpg"><img src="" id="pre01" class="">');

這樣會是對的作法嗎？