title: JQUERY - add CSS class to BUTTON element after click
body: <p>I want to change the background color of a button permanently after it is clicked. Using the following code the color only changes while the button is active/being clicked. Once the mouse button is released the added "clicked" class is no longer applied to the element.</p>
  
  <p>Applying the following code to an INPUT tag instead of a BUTTON tag works the way I need it to. However, I'm using a BUTTON tag since I want the value to be different from the text inside the button.</p>
  
  <p>What do I need to change? </p>
  
  <p>-- Thanks.       </p>
  
  <pre><code> HTML
   &lt;button class="inactive" value="test"&gt;Button&lt;/button&gt;
  
   CSS
   .inactive {background-color:gray;}
   .clicked {background-color:orange;}
  
   JS
   $(document).ready(function(){
        $('button').click(function(){
             $(this).addClass('clicked');
        });
   );
  </code></pre>