Clicar em Botão fazer desaparecer e aparecer outro botão

OLá Boa tarde, estou com um problema de quando eu clicar em um button com id "bt1" ele fique display NONE e o button #bt2 fique display BLOCK.

Nesse caso ao aperta no botão 1 ele vai sumir e vai aparecer o botão 2 no mesmo lugar.

Javascript

     // BOTÃO CARREGAR MAIS 
        $('#bt1').click(function() {
        $("#bt2").css("display","block");
        $("#bt1").css("display","none");
    }) 

Html

 <!-- BOTÃO CARREGAR MAIS -->
        <div id="rend-more"> <div class="button-group filters-button-group" id="#bt-carregar">
            <button id="bt1" class="button is-checked" data-filter=".td" style="width: 262px; height: 50px; border: 1px solid rgb(84, 128, 128); position: relative; top: 30%; left: 50%; transform: translateX(-50%); cursor: pointer; margin-top: 30px; background-color: white;">
                <h2 style="text-align: center;color:#4d8984;font-family: 'Gotham-Thin';float: left;font-size: 25px;padding-left: 30px;padding-top: 5px;">CARREGAR</h2>
                <h3 style="padding-left: 5px;float: left;font-size: 25px;color:#4d8984;font-family: 'gotham-bold';padding-top: 5px;">+</h3></button>
            <button id="bt2" class="button is-checked" data-filter=".visu" style="width: 262px; height: 50px; border: 1px solid rgb(84, 128, 128); position: relative; top: 30%; left: 50%; transform: translateX(-50%); cursor: pointer; margin-top: 30px; background-color: white;">
                <h2 style="text-align: center;color:#4d8984;font-family: 'Gotham-Thin';float: left;font-size: 25px;padding-left: 30px;padding-top: 5px;">CARREGAR</h2>
                <h3 style="padding-left: 5px;float: left;font-size: 25px;color:#4d8984;font-family: 'gotham-bold';padding-top: 5px;">+</h3></button></div>
        </div>  

CSS

#rend-more #bt1{
 display: block;   
}
#rend-more #bt2{
 display: none;   
}