Dodaj i usuń atrybut za pomocą jquery

To są moje przyciski:

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

to jest mój kod 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>

a to jest mój kod HTML:

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

Mój problem polega na tym, że po kliknięciu przycisku Usuń wszystko jest w porządku, a identyfikator zostanie usunięty, ale po kliknięciu przycisku Usuń, po kliknięciu przycisku Dodaj kod nie działa i nic się nie dzieje!

Muszę dodać i usunąć identyfikator z tym kodem, ale mogę po prostu usunąć identyfikator, nie mogę dodać identyfikatora. Potrzebuję do tego pomocy i jeszcze jednej rzeczy

Jak mogę dodać styl CSS dla przycisku, gdy przycisk jest aktywny? w ten sposób, po kliknięciu przycisku Usuń, chcę zmienić tło przycisku na czerwony. Muszę dodać klasę css dla dodania i usunąć, gdy przyciski są aktywne! i nie wiem jak!

questionAnswers(4)

yourAnswerToTheQuestion