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