I'm having an issue adding focus() to an input that is dynamically created with jquery. I'm still learning, so I've mixed in traditional js with my jquery code because it's easier for me to understand. Anyhow document.getElementById(name).style.backgroundColor="#72A4D2"; successfully changes the background of the input ID, but document.getElementById(name).focus(); does nothing. I know that this is the correct code because if I hard code an input into the form (which you can see I've commented out below, such as
document.getElementById('password').focus(); it refocuses successfully on that input. Thus I'm stumped.

Anyone know how to deal with this issue?

JS:
Code:
 
$(function() {

	var i = $('input').size() + 1;

	$('a.add').click(function() {
							  
		$('<p>Username ' + i + ': <input type="text" id="user' + i + '" name="user' + i + '" onblur="javascript:checkl(this.name, this.value);"></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
		

		i++;
	});
});

function checkl(name, value){
	var errors=new Array();
	var x; 
  	var msg = "There were some problems...\n";
	
	if (value==="") {
  	errors['blank'] = "Field must not be blank";
	}
  
  	for (x in errors)
 	 {
	  msg += "\n"+errors[x];
  	 }

 	 if (!(x==undefined)){ 
  	alert(msg); 
	document.getElementById(name).style.backgroundColor="#72A4D2"; //works, changed input background successfully
	document.getElementById(name).focus(); // does NOT work, no focus
	// document.getElementById('password').focus(); // successfully refocuses on hard coded 'password' input
	}else{
	document.getElementById(name).style.backgroundColor="";
	}
}
HTML:
Code:
<a href="#" class="add" id="1"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> 
<form id="target" name="target" action="post.php" method="post" onsubmit="return validate(this);">
<div id="inputs">
<!-- dynamically created inputs here -->
</div>

<!-- Password: <input type="password" id="password" name="password" size="10"> -->
<input type="submit" value="Send">

</form>