title: Add checkbox to price calculation
body: <p>Currently my price output gets calculated based on the chosen quantity of an input field. I have been trying to add a checkbox to this calculation that, if checked, adds $5 to the total price. That being said, I haven't been very successful. In my understanding, there are two calculations going on:</p>
  
  <ol>
  <li><p>I hit the increase/decrease button and it checks if the checkbox has been selected</p></li>
  <li><p>I select the checkbox and it calculates the total price</p></li>
  </ol>
  
  <p>This is the code I have so far:</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>  function IncludePrice()
  {
      var IncludePrice=0;
      var include = theForm.elements["include"];
      if(include.checked==true)
      {
          IncludePrice=5;
      }
      return IncludePrice;
  }
  
  
  
  
  
  $(".incr-btn_mobile").on("click", function(e) {
        var $button = $(this);
        var oldValue = $button.parent().find('.quantity').val();
        $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
        if ($button.data('action') == "increase") {
          var newVal = parseFloat(oldValue) + 1;
        } else {
          // Don't allow decrementing below 1
          if (oldValue &gt; 1) {
            var newVal = parseFloat(oldValue) - 1;
          } else {
            newVal = 1;
            $button.addClass('inactive');
          }
        }
        $button.parent().find('.quantity').val(newVal);
  
        var cakePrice = newVal;
        var includep = IncludePrice();
        var divobj = document.getElementById($button.attr('data-target'));
        divobj.style.display = 'block';
        divobj.innerHTML = "=&amp;nbsp;&amp;nbsp;$" + (cakePrice) * 7.99 + (includep);
        e.preventDefault();
      });
      </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bg {
   width: 100%;
  }
  
  
  .column {
      float: left;
      width: 50%;
      padding: 10px;
  }
  
  /* Clear floats after the columns */
  .row:after {
      content: "";
      display: table;
      clear: both;
      
  }
  
  
  
  .count-input_mobile {
    position: relative;
    max-width: 1000%;
    max-width: 400px;
    margin-top: 10px;
    text-align: center;
  }
  .count-input_mobile input {
    width: 100%;
    height: 42px;
    border: 1px solid #000
    border-radius: 2px;
    background: none;
    text-align: center;
  }
  .count-input_mobile input:focus {
    outline: none;
  }
  .count-input_mobile .incr-btn_mobile {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    font-size: 26px;
    font-weight: 300;
    text-align: center;
    line-height: 30px;
    top: 50%;
    right: 0;
    margin-top: -15px;
    text-decoration:none;
  }
  .count-input_mobile .incr-btn_mobile:first-child {
    right: auto;
    left: 0;
    top: 46%;
  }
  .count-input_mobile.count-input-sm {
    max-width: 125px;
  }
  .count-input_mobile.count-input-sm input {
    height: 36px;
  }
  .count-input_mobile.count-input-lg {
    max-width: 200px;
  }
  .count-input_mobile.count-input-lg input {
    height: 70px;
    border-radius: 3px;
  }
  
  .button_mobile {
      border: 1px solid #000;
      border-radius: 2px;
      background: none;
      padding: 10.5px;
      width:100%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      margin-top:10px;
  }
  
  .sum_output {
      background: none;
      padding: 9.5px;
      width:100%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      margin-top:10px;
  }
  
  .accordion_img {
    width:200%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="count-input_mobile space-bottom"&gt;
  &lt;a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#"&gt;–&lt;/a&gt;
  &lt;input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/&gt;
  &lt;a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#"&gt;+&lt;/a&gt;
  &lt;/div&gt;      
  &lt;label for='include' class="inlinelabel"&gt;Include Extra? ($5)&lt;/label&gt;
                 &lt;input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" /&gt;
  &lt;div id="cleanse_drop_1" class="sum_output"&gt;=&amp;nbsp;&amp;nbsp;$7.99&lt;/div&gt;
                              
                             
                             </code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <blockquote>
      <p>UPDATE:</p>
    </blockquote>
  </blockquote>
  
  <p>I changed made some changes based on the feedback here, but this seems to break the increase/decrease field. Here is the code as is:</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>$(".incr-btn_mobile").on("click", function(e) {
        var $button = $(this);
        var oldValue = $button.parent().find('.quantity').val();
        $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
        if ($button.data('action') == "increase") {
          var newVal = parseFloat(oldValue) + 1;
        } else {
          // Don't allow decrementing below 1
          if (oldValue &gt; 1) {
            var newVal = parseFloat(oldValue) - 1;
          } else {
            newVal = 1;
            $button.addClass('inactive');
          }
        }
        $button.parent().find('.quantity').val(newVal);
  
        var cakePrice = newVal;
        var includep = theForm.elements.include.checked * 5;
        var divobj = document.getElementById($button.attr('data-target'));
        divobj.style.display = 'block';
        divobj.innerHTML = "=&amp;nbsp;&amp;nbsp;$" + (cakePrice) * 7.99 + (includep);
        e.preventDefault();
      });
      </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bg {
   width: 100%;
  }
  
  
  .column {
      float: left;
      width: 50%;
      padding: 10px;
  }
  
  /* Clear floats after the columns */
  .row:after {
      content: "";
      display: table;
      clear: both;
      
  }
  
  
  
  .count-input_mobile {
    position: relative;
    max-width: 1000%;
    max-width: 400px;
    margin-top: 10px;
    text-align: center;
  }
  .count-input_mobile input {
    width: 100%;
    height: 42px;
    border: 1px solid #000
    border-radius: 2px;
    background: none;
    text-align: center;
  }
  .count-input_mobile input:focus {
    outline: none;
  }
  .count-input_mobile .incr-btn_mobile {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    font-size: 26px;
    font-weight: 300;
    text-align: center;
    line-height: 30px;
    top: 50%;
    right: 0;
    margin-top: -15px;
    text-decoration:none;
  }
  .count-input_mobile .incr-btn_mobile:first-child {
    right: auto;
    left: 0;
    top: 46%;
  }
  .count-input_mobile.count-input-sm {
    max-width: 125px;
  }
  .count-input_mobile.count-input-sm input {
    height: 36px;
  }
  .count-input_mobile.count-input-lg {
    max-width: 200px;
  }
  .count-input_mobile.count-input-lg input {
    height: 70px;
    border-radius: 3px;
  }
  
  .button_mobile {
      border: 1px solid #000;
      border-radius: 2px;
      background: none;
      padding: 10.5px;
      width:100%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      margin-top:10px;
  }
  
  .sum_output {
      background: none;
      padding: 9.5px;
      width:100%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      margin-top:10px;
  }
  
  .accordion_img {
    width:200%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="count-input_mobile space-bottom"&gt;
  &lt;a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#"&gt;–&lt;/a&gt;
  &lt;input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/&gt;
  &lt;a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#"&gt;+&lt;/a&gt;
  &lt;/div&gt;      
  &lt;label for='include' class="inlinelabel"&gt;Include Extra? ($5)&lt;/label&gt;
                 &lt;input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" /&gt;
  &lt;div id="cleanse_drop_1" class="sum_output"&gt;=&amp;nbsp;&amp;nbsp;$7.99&lt;/div&gt;
                              
                             
                             </code></pre>
  </div>
  </div>
  </p>