title: toggle edit buttons with save and cancel buttons
body: <p>I want to change the button when it's clicked. Initial there's only one "Edit" button. After I click it, it will become a "Save" button and I also want to show a "Cancel" button next to it. 
  How can I do that? I have the code below.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;meta charset=utf-8 /&gt;
      &lt;title&gt;demo by roXon&lt;/title&gt;
      &lt;!--[if IE]&gt;
        &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;button data-text="Save"&gt;Edit&lt;/button&gt;
      &lt;p&gt;Hello&lt;/p&gt;
      &lt;p style="display: none"&gt;Good Bye&lt;/p&gt;
  
  &lt;script&gt;
  $("button").click(function(){
      $(this).nextUntil('button').toggle();
  
  
      var btnText = $(this).text();
      $(this).text( $(this).data('text') );
      $(this).data('text', btnText );
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>