title: How to create a total using plus minus buttons and input box
body: <p>Im trying to make a price calculator where 1 employee = $21 a month. There are two way I want to be able to set the quantity of employees. I would like to use a plus and minus sign to adjust the quantity as well as have an input box where they can type the quantity. Adjusting either will instantly update the total. In my attached code you will see that the typing a number into the input box works correctly but using the plus and minus sign does not adjust the total. It changes the number but the math is not executed. Does anyone have any ideas? Thank you!</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-js lang-js prettyprint-override"><code>var $buttonPlus = $('.increase-btn');
  var $buttonMin = $('.decrease-btn');
  var $quantity = $('.quantity');
  /*For plus and minus buttons*/
  $buttonPlus.click(function(){
    $quantity.val( parseInt($quantity.val()) + 1 );
  });
  $buttonMin.click(function(){
    $quantity.val( parseInt($quantity.val()) - 1 );
  });
  
  /*For total*/
  $(document).ready(function(){
   $(".checkout").on("keyup", ".quantity", function(){
    var price = +$(".price").data("price");
    var quantity = +$(this).val();
    $("#total").text("$" + price * quantity);
   })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .checkout {
   height: 300px;
   width: 400px;
   margin: 20px auto;
   border: 2px solid black;
   text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;div class="checkout"&gt;
  &lt;h1 class="title"&gt;Checkout&lt;/h1&gt;
    &lt;p class="price" data-price="21"&gt;$21 per month&lt;/p&gt;  
    &lt;p class="description"&gt;Quantity:&lt;/p&gt;  
    &lt;button type="button" class="decrease-btn"&gt;-&lt;/button&gt;  
    &lt;input type="text" class="quantity" value="1"&gt; 
    &lt;button type="button" class="increase-btn"&gt;+&lt;/button&gt;   
    &lt;p class="total"&gt;Total: &lt;span id="total"&gt;$21&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>