Image preview not working on other Dynamically created File fields

Hi,
I have created some dynamically add/remove fields. All fields are working fine except the image upload field.

The proble is that when I add image in first field it displays fine. But when I add image on second or more fields the image gets display on first field only.

Means every time when I add image to fields it only display preview in first field only. I want it to get display on their respective fields.

Here is my code:

<?php get_header(); ?>

<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>

<script type='text/javascript'>

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>

<?php get_footer(); ?>

Plz help… Thanks…