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

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");
}
});