Creating a form with jquery. Cannot append after input element

Creating a form with jquery. Cannot append after input element

Here is the HTML version form I need to create using jquery...
<form id="loginForm" class="loginLabel" action="login/login.php"
method="post">
Username : <input type="text" name="Username" ><br>
Password : <input type="password" name="Password" ><br>
<input type="Submit" name="login_Submit" value="Login">
</form>
And here is the jquery I have written for it...
var loginForm = document.createElement("form");
var userInput = document.createElement("input");
$(userInput).attr("id", "userInput")
.attr("type", "text")
.attr("name", "Username");
var br = document.createElement('br');
var passInput = document.createElement("input");
$(passInput).attr("id", "passInput")
.attr("type", "text")
.attr("name", "Password");
$(loginForm).attr("id","loginForm" )
.attr("class", "loginLabel")
.text("Username : ")
.append(userInput)
.append(br)
.text("Password : ")
.append(passInput);
$(loginWrapper).append(loginForm);
Unfortunately, jquery overwrites the username input (userInput) with the
password input (passInput). I checked the CSS and there is plenty of room
to go around.