Not able to enter next input field - jQuery

Question

I am not able to type to next input field, the first field where text is being created on comma enter and its seems to be working fine but focus not working

Here is the code

1. Type something in first field, hit comma
2. Try moving to next input field, focus not working

$('#tags input').on('focusout', function() {
	var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
	if (txt) $(this).before('<span class="tag">' + txt + '</span>');
	this.value = "";
	this.focus();
}).on('keyup', function(e) {
	if (/(188|13)/.test(e.which)) $(this).focusout();
	event.preventDefault(e);
});

.form-group{float:left; width:100%; margin-bottom:15px;}
.form-group > input{padding:6px 12px; width:100%;}
.tag{background:#ccc; padding:2px 4px; display:inline-block; margin-right:5px; margin-bottom:5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group" id="tags" >
  <label for="submittedby">Add CC</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>
<div class="form-group" >
  <label for="submittedby">Other</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>

Answer 1

You need to call .focus() on next input field, not this. I've got it this way: document.getElementsByTagName('input')[1], but you can get it any way you like. Here is the working snippet:

$('#tags input').on('focusout', function() {
	var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
	if (txt) $(this).before('<span class="tag">' + txt + '</span>');
	this.value = "";
  var nextInput = document.getElementsByTagName('input')[1]
	nextInput.focus();
}).on('keyup', function(e) {
	if (/(188|13)/.test(e.which)) $(this).focusout();
	event.preventDefault(e);
});

.form-group{float:left; width:100%; margin-bottom:15px;}
.form-group > input{padding:6px 12px; width:100%;}
.tag{background:#ccc; padding:2px 4px; display:inline-block; margin-right:5px; margin-bottom:5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group" id="tags" >
  <label for="submittedby">Add CC</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>
<div class="form-group" >
  <label for="submittedby">Other</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>