title: Cancel button is not working in jQuery
body: <p>Tried to implement edit, save, cancel in collapsible accordion. Everything is working fine. Data is passing and data is saving. Cancel button is not working. When user not willing to save the data he must cancel and go back to first state of the form. I used glyphicons instead of buttons and used jquery functions to achieve the requirement but cancel is not happening.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-6"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading" style="background-color: #b3daff;"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;span style="font-weight: 700;"&gt;Address Details&lt;/span&gt;&amp;nbsp;&amp;nbsp;
          &lt;a class="editAddBtn"&gt;&lt;span
           class="glyphicon glyphicon-pencil"&gt;&amp;nbsp;&lt;/span&gt;&lt;/a&gt;
          &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"&gt; &lt;span class="glyphicon glyphicon-plus" id="pls" style="color: darkred"&gt;&amp;nbsp;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          &lt;div class="col-sm-4 col-md-12"&gt;
            &lt;div class="row"&gt;
              &lt;div class="form-group"&gt;
                &lt;label class="control-label col-sm-12 col-md-8"&gt;Current
           &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
            $(document)
              .ready(
                function() {
                  $('.editAddBtn')
                    .click(
                      function() {
                        if ($('.editField').is(
                            '[readonly]')) { //checks if it is already on readonly mode
                          $('.editField').prop(
                            'readonly', false); //turns the readonly off
                          $('.mySelect').prop(
                            'disabled', false);
                          $('#chk').prop('disabled',
                            false);
                          $('.editAddBtn')
                            .html(
                              '&lt;span class="glyphicon glyphicon-floppy-disk"&gt;&amp;nbsp;&lt;/span&gt;&lt;span id="removeBtn" class="glyphicon glyphicon-repeat"&gt;&amp;nbsp;&lt;/span&gt;'); //Changes the text of the button
  
                        } else { //else we do other things
  
                          saveAddress();
  
                          $('.editField').prop(
                            'readonly', true);
                          $('.mySelect').prop(
                            'disabled', true);
                          $('#chk').prop('disabled',
                            true);
                          $('.editAddBtn')
                            .html(
                              '&lt;span class="glyphicon glyphicon-pencil"&gt;&amp;nbsp;&lt;/span&gt;');
                          $('#removeBtn').on('click', function(e) {
                            e.preventDefault();
                            window.history.back();
                          });
  
                        }
  
                      });
  
                });
  
  
            }
          &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>