title: Add and remove attribute with jquery
body: <p>This is my buttons:</p>
  
  <pre><code>&lt;button id="add"&gt;Add&lt;/button&gt;
  &lt;button id="remove"&gt;Remove&lt;/button&gt;
  </code></pre>
  
  <p>this is my JavaScript code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){   
          /*** Add attribute ***/
          $("#add").click(function(){
              $("#page_navigation1").attr("id","page_navigation1");
          });     
          /*** Remove attribute ***/
          $("#remove").click(function(){
              $("#page_navigation1").removeAttr("id");
          });     
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is my html code:</p>
  
  <pre><code>&lt;div id="page_navigation1"&gt;next&lt;/div&gt;
  </code></pre>
  
  <p>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!</p>
  
  <p>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,</p>
  
  <p>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!</p>