如何在图片预览中多次显示文件输入按钮？

<div id="preview-container">
  <img id="preview-image" src="#" alt="Preview Image">
</div>

<button id="add-button">Add File Input</button>

#preview-container {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
}

#preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#add-button {
  margin-top: 10px;
}

// 获取容器和按钮元素
var container = document.getElementById('preview-container');
var addButton = document.getElementById('add-button');

// 监听按钮点击事件
addButton.addEventListener('click', function() {
  // 创建新的文件输入元素
  var fileInput = document.createElement('input');
  fileInput.type = 'file';

  // 监听文件选择事件
  fileInput.addEventListener('change', function() {
    // 获取选择的文件
    var file = fileInput.files[0];

    // 创建文件读取器
    var reader = new FileReader();

    // 监听文件读取完成事件
    reader.addEventListener('load', function() {
      // 设置图片预览的源为读取到的文件URL
      document.getElementById('preview-image').src = reader.result;
    });

    // 读取文件
    reader.readAsDataURL(file);
  });

  // 将文件输入元素添加到容器中
  container.appendChild(fileInput);
});