title: Button starts the application, but not twice
body: <p>I made this application with a button ("descrição") to open a "gray background" with one text box and two buttons:
  "salvar" (save button) and "cancelar" (cancel button), you can only save and close it if you type something inside the box or click on "cancelar", for the first time it works perfectly, but when you start again it doesn't open the buttons or the text box, and it stays on the "gray background".</p>
  
  <p>I'm still new to HTML, CSS, and JS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#headerR').on('click', function() {
      $('#overlay, #overlay-back').fadeIn(500);
      $(".text-hidden").toggleClass("text");
      $(".saving").toggleClass("myButton");
      $(".canceling").toggleClass("myButton");
  });
  
  
  
  function validation() {
  
      if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
          alert("Preencha a Descrição!");
      } else {
          $(function() {
              $("#save").click(function() {
                  $(".text-hidden").toggleClass("text");
                  $('#overlay, #overlay-back').fadeOut(500);
              });
          });
      }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      width: 100%;
      height: 100%;
  }
  
  #overlay-back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.6;
      filter: alpha(opacity=60);
      z-index: 5;
      display: none;
  }
  
  #overlay {
      position: absolute;
      top: 10;
      left: 50;
      width: 100%;
      height: 100%;
      z-index: 10;
      display: none;
  }
  
  .text-hidden {
      transform: scaleX(0);
      transform-origin: 0% 40%;
      transition: all .7s ease;
      width: 0px;
      height: 0px;
      top: 50%;
      left: 50%;
  }
  
  .saving {
      transform: scaleX(0);
      transform-origin: 0% 40%;
      transition: all .9s ease;
      height: 1px;
      position: absolute;
      top: 90%;
      right: 8%;
      background: Green;
      color: white;
  }
  
  .canceling {
      transform: scaleX(0);
      transform-origin: 0% 40%;
      transition: all .9s ease;
      height: 1px;
      position: absolute;
      top: 90%;
      left: 5%;
      background: Red;
      color: white;
  }
  
  .text {
      transform: scaleX(1);
      width: 300px;
      height: 150px;
      position: absolute;
      top: 20%;
      left: 37%;
  }
  
  .myButton {
      transform: scaleX(1);
      width: 80px;
      height: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    &lt;button id="headerR" type="button"&gt;Descrição&lt;/button&gt;
  &lt;/p&gt;
  &lt;div id="overlay-back"&gt;&lt;/div&gt;
  &lt;div id="overlay"&gt;
    &lt;span&gt;&lt;script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
    type="text/javascript"&gt;
  &lt;/script&gt; 
    &lt;textarea id="desc" type="textarea" class="text-hidden"&gt;
  &lt;/textarea&gt; &lt;button id="save" class="saving" onclick=
  "validation();"&gt;&lt;span&gt;&lt;span&gt;Salvar&lt;/span&gt; &lt;button id="cancel"
    class="canceling" onclick=
    "validation();"&gt;Cancelar&lt;/button&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>