live username validation not working - php

Question

Hi I am trying to validate email and username by using ajax but same code is not working for two different inupt fields.
HTML
<script>
//function to check username availability
function check_availability_username(){
//get the username
var username = $('.username').val();
//use ajax to run the check
$.post("check_username.php", { username: username },
function(result){
//if the result is 1
if(result == 1){
//show that the username is available
$('#username_availability_resul1').html('<span style="color:#0C0;">'+username + ' is available!</span>');
}else{
//show that the username is NOT available
$('#username_availability_result').html('<span style="color:#F00;">'+username +result+ ' already used!</span>');
}
});
}
function check_availability(){
//get the username
var email = $('.email').val();
//use ajax to run the check
$.post("check_email.php", { email: email },
function(result){
//if the result is 1
if(result == 1){
//show that the username is available
$('#email_availability_result').html('<span style="color:#0C0;">'+email + ' is available!</span>');
}else{
//show that the username is NOT available
$('#email_availability_result').html('<span style="color:#F00;">'+email + ' already used!</span>');
}
});
}
</script>
<form role="form" method="post" action="add-users.php?insert=ok" class="form-horizontal form-groups-bordered">
<div class="form-group">
<label for="field-1" class="col-sm-2 control-label">Username</label>
<div class="col-sm-6">
<input type="text" onkeyup="check_availability_username()" class="form-control" name="username" placeholder="Username1" required>
<div id='username_availability_result'></div>
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-2 control-label">Email Address</label>
<div class="col-sm-6">
<input type="email" onkeyup="check_availability()" class="form-control email" name="email" placeholder="Email Address" required>
<div id='email_availability_result'></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<input type="submit" class="btn btn-primary" value="Add User">
<input class="btn btn-danger" type="reset" value="Reset">
</div>
</div>
</form>
check_username.php
<?php
//connect to database
$db = mysqli_connect('localhost', 'root', '123', 'mydb') or die('db not connected');
//get the username
$username = mysqli_real_escape_string($db, $_POST['username']);
//mysql query to select field username if it's equal to the username that we check '
$result = mysqli_query($db, 'select username from userinfo where username = "'. $username .'"');
//if number of rows fields is bigger them 0 that means it's NOT available '
if(mysqli_num_rows($result)>0){
//and we send 0 to the ajax request
echo 0;
}else{
//else if it's not bigger then 0, then it's available '
//and we send 1 to the ajax request
echo 1;
}
?>
check_email.php
<?php
//connect to database
$db = mysqli_connect('localhost', 'root', '123', 'mydb') or die('db not connected');
//get the email
$email = mysqli_real_escape_string($db, $_POST['email']);
//mysql query to select field email if it's equal to the email that we check '
$result = mysqli_query($db, 'select email from userinfo where email = "'. $email .'"');
//if number of rows fields is bigger them 0 that means it's NOT available '
if(mysqli_num_rows($result)>0){
//and we send 0 to the ajax request
echo 0;
}else{
//else if it's not bigger then 0, then it's available '
//and we send 1 to the ajax request
echo 1;
}
?>
code is working perfectly for EMAIL validation but not for USERNAME.
any suggestions