Bootstrap alert not hiding after shown once

I have a problem with alert messages that I'm showing with jQuery. Once it is shown, I do data validation and then try to hide it again.

It's not working and there is no error in the console, even log prints before and after it.

HTML

<div class="alert alert-danger" id="error-message"> <h6 align="left" id='message'></h6> </div>

jQuery

$('#password, #confirm_password').on('keyup', function () {
    if ($('#password').val() == $('#confirm_password').val()) {
        $('#error-message').hide();
        $('#message').html('').css('color', 'green');
    } else 
        $('#message').html('Passwords Do Not Match').css('color', 'red');
        $('#error-message').show();
});

It's shown but not hiding again