Estos son mis botones:

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

Este es mi 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>

y este es mi código html:

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

Mi problema es que cuando hago clic en el botón Quitar, todo está bien y la ID se eliminará, pero después de hacer clic en el botón Quitar, cuando hago clic en el botón Agregar, el código no funciona y ¡no pasa nada!

Necesito agregar y eliminar ID con este código, pero solo puedo Eliminar ID, no puedo agregar ID. Necesito ayuda para esto, y una cosa más,

¿Cómo puedo agregar el estilo CSS para el botón cuando el botón está activo? así, cuando hago clic en el botón Quitar, quiero cambiar el fondo del botón a rojo. ¡Necesito agregar la clase css para agregar y eliminar cuando los botones están activos! y no se como!