title: Jquery: Toggle not working
body: <p>I have a HTML page structure like this:</p>
  
  <pre><code>&lt;div class="editable&gt;CONTENT
      &lt;span class="multiple-users"&gt;span-content&lt;/span&gt;
      &lt;span class="multiple-users"&gt;span-content2&lt;/span&gt;
      &lt;span class="multiple-users"&gt;span-content3&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>When I click on a span element with class "multiple-users", I want it to replace everything in the div of class "editable" with the content of the clicked span. And when I click on the content of the clicked span, I want it to revert back to its original form, replacing it with everything that was originally in the div. </p>
  
  <p>Here is what I have: </p>
  
  <pre><code>$(document).ready(function () {
      $('span.multiple-users').click(function () {
          var id = $(this).text().match(/[0-9]+/);
          var old_html = $(this).closest('div.editable').html();
          var instructor_obj = $(this).closest('div.editable');
  
          instructor_obj.html("&lt;span id=" + id + " &gt;Instructor ID: " + id + "&lt;/span&gt;");
  
          $('#' + id).click(function () {
              $(this).closest('div.editable').html(old_html);
          });    
      });
  }); 
  </code></pre>
  
  <p>But this doesn't do exactly what I want it to do. When I click on a span of class="multiple-users," it replaces everything in the div with the span-content, and when I click on the span-content, it reverts back to the original contents. However, when I try to click on the span again, it doesn't replace everything in the div with the content of the span clicked on. </p>
  
  <p>In short, it doesn't toggle properly. Can you see what's wrong with my code?</p>