title: jQuery - Keep original html content and retrieve it, even if overwritten
body: <p>I have some content in the <code>numbers</code> div. When I click <code>numbers-clicker</code>, the content of numbers <code>123456789</code> is saved to the oldNumbers variable, the content is changed to <code>987654321</code>, and the class <code>opened</code> is toggled on the <code>numbers</code> div. When I click <code>numbers-clicker</code> again, I am trying to restore the original oldNumbers, so <code>123456789</code> to the <code>numbers</code> div, instead, the oldNumbers is overwritten with the <code>987654321</code>. How can we make sure the oldNumbers stays as the beginning content of the <code>numbers</code> div, <code>123456789</code>?</p>
  
  <pre><code>&lt;div id="numbers-clicker"&gt;Clicker&lt;/div&gt;
  &lt;div id="numbers"&gt;123456789&lt;/div&gt;
  
  $('#numbers-clicker').off('click').on('click',function(){
      $this = $(this);
      var oldNumbers = $('#numbers').html();
  
      if(!$this.is('.opened')){ 
          $('#numbers').html('987654321'); 
      } else { 
          $('#numbers').html(oldNumbers); 
      }
      $this.toggleClass('opened')
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5tnuj/" rel="nofollow">Here is a fiddle</a></p>