Это мои кнопки:

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

это мой код 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>

и это мой HTML-код:

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

Моя проблема в том, что когда я нажимаю кнопку «Удалить», все в порядке, и ID будет удален, но после нажатия на кнопку удаления, когда я нажимаю на кнопку Добавить, код не работает, и ничего не происходит!

Мне нужно добавить и удалить идентификатор с помощью этого кода, но я могу просто удалить идентификатор, я не могу добавить идентификатор. Мне нужна помощь для этого, и еще одна вещь,

Как я могу добавить стиль CSS для кнопки, когда кнопка активна? вот так, когда я нажимаю кнопку Удалить, я хочу изменить фон кнопки на красный. Мне нужно добавить класс CSS для добавления и удаления, когда кнопки активны! и я не знаю как!