图像预览不适用于其他动态创建的文件字段

Question

我创建了一些动态添加/删除字段。除图像上传字段外，所有字段都正常工作。

问题在于，当我在第一个字段中添加图像时，它显示正常。但是当我在第二个或更多字段上添加图像时，图像仅显示在第一个字段上。

表示每次向图像添加图像时，它仅在第一个字段中显示预览。我希望它能在各自的领域展示。

这是我的代码：

jQuery(document).ready(function($) {

  //fadeout selected item and remove
  $(document).on('click', '#remove-member-fields', function(event) {
    event.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).empty();
      return false;
    });
  });

  var rows = '<div class="team-member-fields"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="<?php echo esc_url( site_url(' / profile - images / blank - image.png ') ); ?>" alt=""></div><div class="form-group"><label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event)" style="display: none;"></label></div></div><div class="col-md-8"><div class="form-group"><label for="member_name">Member Name <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]" placeholder=""></div><div class="form-group"><label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]" placeholder=""></div><div class="form-group"><label for="member_email">Email address <b style="color:#FF0000;">*</b></label><input type="email" class="form-control" name="member_email[]" placeholder=""></div><div class="form-group"><label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_facebook_id[]" placeholder=""></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove Member</button><br></div></div></div>';

  //add input
  $('#add-member-fields').click(function() {
    $(rows).fadeIn("slow").appendTo('#member-fields');
    i++;
    return false;
  });

});

function preview_member(event) {

  var reader = new FileReader();

  reader.onload = function() {

    var output = document.getElementById('member_image');
    output.src = reader.result;

  }

  reader.readAsDataURL(event.target.files[0]);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data">

  <div class="panel panel-default">

    <div class="panel-heading">
      <center><b>Team Members</b></center>
    </div>

    <div class="panel-body">

      <div class="row">

        <div class="col-md-4">

          <div class="thumbnail">

            <img src="" id="member_image" alt="">

          </div>

          <div class="form-group">

            <label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event)" style="display: none;"></label>

          </div>

        </div>

        <div class="col-md-8">

          <div class="form-group">
            <label for="member_name">Member Name <b style="color:#FF0000;">*</b></label>
            <input type="text" class="form-control" name="member_name[]" placeholder="">
          </div>

          <div class="form-group">
            <label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label>
            <input type="text" class="form-control" name="member_role[]" placeholder="">
          </div>

          <div class="form-group">
            <label for="member_email">Email address <b style="color:#FF0000;">*</b></label>
            <input type="email" class="form-control" name="member_email[]" placeholder="">
          </div>

          <div class="form-group">
            <label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label>
            <input type="text" class="form-control" name="member_facebook_id[]" placeholder="">
          </div>

        </div>

      </div>

      <button type="button" class="btn btn-success btn-block" id="add-member-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Member</button>

      <br>

      <div id="member-fields">

      </div>

    </div>

  </div>

</form>

Plz帮助......谢谢...