javascript - JQuery add/remove class not working the second time

I have a form to register user with some info. Upon
submit, an ajax call is made which inserts the data into the DB, and returns a status
code. Depending upon the status, I show a div. The div has an initial class "hidden",
and a close button. Upon return from the php, I remove the "hidden" class and add the
"alert-danger" or "alert-success" class.

Once
the user clicks the close(x) button, I add the "hidden" class again, and check if the
element has "alert-danger" or "alert-success" class and remove that as well. This works
(or at least it hides) for the first time. However, the div doesn't show up the second
time.

What is it that I am missing
here?

Here's the
div

 
             class="message-head"> 
 

            

Here's
the code run upon
success/error

$.ajax({

            type:"post",
 url:"register.php",

            data:"name="+name+"&phone="+phone+"&email="+email+"&msg="+msg,

            success:function(data){

 if(data.status === 'success'){

            //show the status msg
 $('.message-head').text("Thank
            You");

 $('.message').text("Your Request has been
            taken");

            $(".status").removeClass("hidden").addClass('alert-success');


            }else {
 $('.message-head').text("Sorry");

            $('.message').text("There is some Error. Please Try Again Later");

            //alert(data.status);

            $('.status').removeClass('hidden').addClass('alert-danger');
}}

And
here's the code for the close button
click

$('.close').click(function(){

            if ( $('.status').hasClass("alert-danger") ) {

            $('.status').removeClass("alert-danger").addClass("hidden");
}else if (
            $('.status').hasClass("alert-success") ) {

            $('.status').removeClass("alert-success").addClass("hidden");
}
});