Add and remove attribute with jquery

This is my buttons:

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

this is my JavaScript code:

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

and this is my html code:

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

My problem is, when I click on Remove button everything is fine and ID will be removed, but after click on remove button, when I click on Add button, code is not working and nothing happens!

I need to add and remove ID whith this code, but I can just Remove ID, I cant add ID. I need some help for this, and one more thing,

How I can add CSS style for button when button is Active? like this, when I click on Remove button, I want change button background to red. I need to add css class for add and remove when buttons are active! and I dont know how!