Attribut mit jquery hinzufügen und entfernen

Das sind meine Knöpfe:

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

Das ist mein 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>

und das ist mein html code:

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

Mein Problem ist, wenn ich auf "Entfernen" klicke, ist alles in Ordnung und die ID wird entfernt. Wenn ich jedoch auf "Entfernen" klicke, funktioniert der Code nicht und es passiert nichts!

Ich muss ID mit diesem Code hinzufügen und entfernen, aber ich kann ID nur entfernen, ich kann ID nicht hinzufügen. Ich brauche etwas Hilfe dafür und noch eine Sache,

Wie kann ich einen CSS-Stil für eine Schaltfläche hinzufügen, wenn die Schaltfläche aktiv ist? Wenn ich auf Entfernen klicke, möchte ich, dass der Hintergrund der Schaltfläche rot wird. Ich muss eine CSS-Klasse hinzufügen, um Schaltflächen hinzufügen und entfernen zu können, wenn sie aktiv sind! und ich weiß nicht wie!

Antworten auf die Frage(4)

Ihre Antwort auf die Frage