<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-5"><label>Member's Username</label></div>
      <div class="col-md-5"><label>Role in Project</label></div>
      <div class="col-md-2"></div>

    </div>

<?php

$project_id = $_SESSION['project_id']; global $wpdb; $member_details = $wpdb->get_results( $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}orocox_project_members WHERE project_id = %d", $project_id ) );

foreach ( $member_details as $member_detail )
{
    $member_username[] = $member_detail->user_name;
    $member_role[] = $member_detail->user_role;
    $member_status[] = $member_detail->status;
}

?>

    <div class="row">

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

        <div class="form-group">

          <input type="text" class="form-control" name="user_login[]" value="<?php if ( $member_username[0] != '' ) echo esc_attr( $member_username[0] ); ?>" placeholder="" readonly="readonly">

        </div>

      </div>

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

        <div class="form-group">

          <input type="text" class="form-control" name="user_role[]" value="<?php if ( $member_role[0] != '' ) echo esc_attr( $member_role[0] ); ?>" placeholder="">
          <input type="hidden" class="form-control" name="status[]" value="<?php if ( $member_status[0] != '' ) echo esc_attr( $member_status[0] ); ?>" placeholder="">

        </div>

      </div>

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

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

      </div>

    </div>

<?php $count_usernames = count( $member_username );

for ( $i = 1; $i < $count_usernames; $i++ ) { ?>

    <div class="row">

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

        <div class="form-group">

          <input type="text" class="form-control" id="user_login" name="user_login[]" value="<?php if ( $member_username[$i] != '' ) echo esc_attr( $member_username[$i] ); ?>" placeholder="">

        </div>

      </div>

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

        <div class="form-group">

          <input type="text" class="form-control" name="user_role[]" value="<?php if ( $member_role[$i] != '' ) echo esc_attr( $member_role[$i] ); ?>" placeholder="">
          <input type="hidden" class="form-control" name="status[]" value="<?php if ( $member_status[$i] != '' ) echo esc_attr( $member_status[$i] ); ?>" placeholder="">

        </div>

      </div>

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

        <button type="button" class="btn btn-danger" id="remove-username-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button>

      </div>

    </div>

<?php } ?>

    <div id="username-fields">

    </div>

<p class="help-block"><i>To add member please register new User, if already not registered.</i></p>

  </div>

</div>

<script>

jQuery(document).ready(function($) {
  var wrapper = $("#username-fields");
  var add_button = $("#add-username-fields");

  var x = 1;
  var availableAttributes = [
      "John",
      "Pamela",
      "Rogers",
      "Peter"
    ];
  var previousValue="";

  add_button.click(function(e) {
    e.preventDefault();
    x++;
    var element = $('<div id="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" id="user_login" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="status[]" value="Unverified" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

    element.fadeIn("slow").find("input[name^='user_login']").autocomplete({
    autoFocus: true,
      source: availableAttributes,
    });
    wrapper.append(element);

  });

  wrapper.on("keyup","#user_login",function() {
    var isValid = false;
    for (i in availableAttributes) {
        if (availableAttributes[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }

});

  wrapper.on("click", "#remove_field", function(e) {
    e.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).closest('#user-fields').remove();
      x--;
    });
  });
});

</script>