title: Using jQuery and a Button to Toggle Editable Field and Class Name (jQuery, HTML, PHP)
body: <p>I'm trying to build user profiles with editable fields.</p>
  
  <p>My approach is to allow a field to be edited by clicking a button that says "edit".  On click, jQuery should</p>
  
  <ul>
  <li>Change the styling of the field to draw user's attention</li>
  <li>Allow the field to be editable</li>
  <li>Change the button text to "save"</li>
  <li>Change the button class to "save" in order to call new jQuery functionality on the subsequent click</li>
  </ul>
  
  <p>When the button that says "save" is clicked, jQuery should</p>
  
  <ul>
  <li>Make the field non-editable</li>
  <li>Remove styling</li>
  <li>Update the DB via AJAX (not coded yet)</li>
  <li>Change class back to "edit"</li>
  <li>Change button text back to "edit"</li>
  </ul>
  
  <p>My problem is that the "edit" jQuery code block executes and produces the desired results but the "save" code block doesn't work on click.</p>
  
  <p>Dev tools show no errors.</p>
  
  <p><a href="https://jsfiddle.net/848yqkvz/2/" rel="nofollow noreferrer" title="jsFiddle">https://jsfiddle.net/848yqkvz/2/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="row text-center company"&gt;Company Name&lt;/div&gt;
  &lt;button class="btn btn-default edit"&gt;Edit&lt;/button&gt;
  </code></pre>
  
  <p><strong>"edit button" JS</strong></p>
  
  <pre><code>$(document).ready(function() {
    $('.edit').click(function() {
      $('.company').attr('contenteditable', 'true').css({
        'border': 'black solid 1px',
        'outline': 'none'
      }).focus();
      $(this).text("Save").addClass('save').removeClass('edit');
    });
  });
  </code></pre>
  
  <p><strong>"save button" JS</strong></p>
  
  <pre><code>$(document).ready(function() {
    $('.save').click(function() {
      alert("working!");
      $('.company').attr('contenteditable', 'false').css({
        'border': 'none',
        'outline': 'none'
      });
      $(this).text("Edit").addClass('edit').removeClass('save');
    });
  });
  </code></pre>