Why does the button still display after having been hidden?

Why does the button still display after having been hidden?


HTML

  1.     <label>Howdy, pard!</label>
        <label id="lblLoading">loading...</label>
        <br/>
        <button id="btnHideLoading">Hide loading</button>
        <button id="btnShowLoading">Show loading</button>
CSS

  1.     .hide {
            visibility: hidden;
        }
        .show {
            visibility: visible;
        }
jQuery

  1.     $('#btnShowLoading').addClass('hide');
        
        $('#btnHideLoading').click(function () {
            $('#lblLoading').addClass('hide');
            $('#btnShowLoading').addClass('show');
            $('#btnHideLoading').addClass('hide');
        });
        
        $('#btnShowLoading').click(function () {
            $('#lblLoading').addClass('show');
            $('#btnHideLoading').addClass('show');
            $('#btnShowLoading').addClass('hide');
        });