Попробуйте этот код
jQuery(document).ready(function($) {
var wrapper = $("#username-fields");
var add_button = $("#add-username-fields");
var x = 1;
var availableAttributes = [
"John",
"Pamela",
"Rogers",
"Peter"
];
var previosValue='';
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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button type="button" class="btn btn-success" id="add-username-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>
<div id="username-fields">
</div>