Este é meus botões:

<button id="add">Add</button>
<button id="remove">Remove</button>

este é o meu código JavaScript:

<script type="text/javascript">
    $(document).ready(function(){   
        /*** Add attribute ***/
        $("#add").click(function(){
            $("#page_navigation1").attr("id","page_navigation1");
        });     
        /*** Remove attribute ***/
        $("#remove").click(function(){
            $("#page_navigation1").removeAttr("id");
        });     
    });
</script>

e este é o meu código html:

<div id="page_navigation1">next</div>

Meu problema é, quando eu clico no botão Remover tudo está bem e ID será removido, mas depois clique no botão Remover, quando eu clico no botão Adicionar, o código não está funcionando e nada acontece!

Eu preciso adicionar e remover ID com este código, mas eu posso apenas remover ID, eu não posso adicionar ID. Preciso de ajuda para isso e mais uma coisa

Como posso adicionar estilo CSS para o botão quando o botão está ativo? assim, quando clico no botão Remover, quero mudar o fundo do botão para vermelho. Eu preciso adicionar classe css para adicionar e remover quando os botões estão ativos! e eu não sei como!