How to get unique random values in Dynamic Add / Remove input Fields

I have created Dynamic Add/Remove fields. Everything is working perfectly. The only problem is that there is a hidden field having name="auth_key[]".

For that I want random values. So I use value="<?php echo rand(); ?>". How ever it creates same random values for all the fields that are added. I want unique random values for all the fields that are added.

Following is my code:

<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 Registered Email</label></div>
      <div class="col-md-5"><label>Role in Project</label></div>
      <div class="col-md-2"></div>

    </div>

    <div class="row">

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

        <div class="form-group">

          <input type="text" class="form-control" name="user_email[]" 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="user_status[]" value="Verified" placeholder="">
          <input type="hidden" class="form-control" name="auth_key[]" value="<?php echo rand(); ?>" placeholder="">

        </div>

      </div>

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

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

      </div>

    </div>

    <div id="member-fields">

    </div>

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

  </div>

</div>

<?php

$user = wp_get_current_user();
$args = array(
  'role'         => 'backer',
  'exclude'      => array( $user->ID ),
 );

$users = get_users( $args );
$get_user_emails = wp_list_pluck( $users, 'user_email' );

?>

<script type='text/javascript'>

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

  var x = 1;
  var availableAttributes = <?php echo json_encode($get_user_emails); ?>;
  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_email" name="user_email[]" 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="user_status[]" value="Unverified" placeholder=""><input type="hidden" class="form-control" name="auth_key[]" value="<?php echo rand(); ?>" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_member_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_email']").autocomplete({
    autoFocus: true,
      source: availableAttributes,
    });
    wrapper.append(element);
  });

  wrapper.on("keyup","#user_email",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_member_field", function(e) {
    e.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).closest('#user-fields').remove();
      x--;
    });
  });
});

</script>

Please help me. Thanks in advance.