JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input">
Text 1
  <input type="text" name="1" size="5" maxlength="2" class="quote-input" data-price="9.95">
  Checkbox 1
  <input type="checkbox" name="special_1" value="1" id="1" class="checkbox-hidden special-input" data-price="19.90">
  Checkbox 1
  <input type="checkbox" name="special_1" value="2" id="2" class="checkbox-hidden special-input" data-price="45.95">
  Checkbox 1
  <input type="checkbox" name="special_1" value="3" id="3" class="checkbox-hidden special-input" data-price="69.95">
  Text 1
  <input type="text" name="2" size="5" maxlength="2" class="quote-input" data-price="7.50">
  Text 1
  <input type="text" name="10" size="5" maxlength="2" class="quote-input" data-price="17.95">
  Text 1
  <input type="text" name="11" size="5" maxlength="2" class="quote-input" data-price="19.95">
</div>
<div class="quote">
  <div class="quote-header">
    Quote
  </div>
  <div class="quote-sumamry">

  </div>
  <div class="quote-total">
    <span>total</span>
    <span class="quote-sum" id="quoteTotal">0.00</span>

  </div>
</div>

JavaScript

$(document).ready(function() {
          $("input.quote-input").each(function() {
            $(this).keyup(function() {
              calculateSum();
            });
          });
          $(".special-input").click(function() {
            calculateSum();
          });
        });

        function calculateSum() {
          var sum = 0;
          $("input.quote-input").each(function() {
            if (!isNaN(this.value) && this.value.length != 0) {
              sum += parseFloat($(this).data('price')) * parseFloat(this.value);
            }
          });

          $(".special-input:checked").each(function() {
            sum += parseFloat($(this).data('price'));
          });

          $("#quoteTotal").html(sum.toFixed(2));
        }