title: How to hide an anchor tag and display another anchor tag in the same place
body: <p>I have the following anchor attributes defined in my JSP. Once I click the 'Add All Plans To Cart', I want the 'Add All Plans to Cart' button to hide and 'Remove All Plans From Cart' to be displayed in the same place as 'Add All Plans to Cart'.</p>
  
  <p>Hide and Show is working fine. But the 'Remove All Plans From Cart' is displayed on the next line . I want it to exactly replace the 'Add All Plans To Cart' button. I tried various approaches including document.getElementById and inline,inline-block ete in my Javascript file but none of them worked. </p>
  
  <p>Appreciate any inputs.Thanks.</p>
  
  <p>JSP</p>
  
  <pre><code>&lt;a id="selectAll" class="primaryButton btn btn-small" style="margin-left:10px"&gt;
      Add All Plans To Cart
  &lt;/a&gt;
  
  &lt;a id="removeAll" style="display:none" class="primaryButton btn btn-small" style="margin-left:10px"&gt;
      Remove All Plans From Cart
  &lt;/a&gt;    
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$("#selectAll").click(function () 
  {
      $("#selectAll").hide();
      $("#removeAll").show();
  });
  </code></pre>