2
\$\begingroup\$

Javascript newbie here. I built a total cost of ownership calculator to calculate the cost of a business over 5 years. It has a lot of repeating script and prob way more congested than it needs to be so I was wondering if y'all could give me an idea of how I could go about writing this in a more DRY way. Below is a live demo snippet of a portion of the calculator.

/* Totals */

(function() {
  $('#1sfa1, #1sfa2, #1sfa3, #2sfa1, #2sfa2, #2sfa3, #3sfa1, #3sfa2, #3sfa3, #4sfa1, #4sfa2, #4sfa3, #5sfa1, #5sfa2, #5sfa3, #1sfm1, #1sfm2, #1sfm3, #2sfm1, #2sfm2, #2sfm3, #3sfm1, #3sfm2, #3sfm3, #4sfm1, #4sfm2, #4sfm3, #5sfm1, #5sfm2, #5sfm3, #1hcc1, #1hcq1, #1hcc2, #1hcq2, #1hcc3, #1hcq3, #1hcc4, #1hcq4, #1hcc5, #2hcq5, #2hcc1, #2hcq1, #2hcc2, #2hcq2, #2hcc3, #2hcq3, #2hcc4, #2hcq4, #2hcc5, #2hcq5, #3hcc1, #3hcq1, #3hcc2, #3hcq2, #3hcc3, #3hcq3, #3hcc4, #3hcq4, #3hcc5, #3hcq5, #4hcc1, #4hcq1, #4hcc2, #4hcq2, #4hcc3, #4hcq3, #4hcc4, #4hcq4, #4hcc5, #4hcq5, #5hcc1, #5hcq1, #5hcc2, #5hcq2, #5hcc3, #5hcq3, #5hcc4, #5hcq4, #5hcc5, #5hcq5, #1hc1, #1hc2, #1hc3, #1hc4, #1hc5, #2hc1, #2hc2, #2hc3, #2hc4, #2hc5, #3hc1, #3hc2, #3hc3, #3hc4, #3hc5, #4hc1, #4hc2, #4hc3, #4hc4, #4hc5, #5hc1, #5hc2, #5hc3, #5hc4, #5hc5').on('change keyup input', function() {

    /* ------- Subscription Fees ------- */
    sf1 = parseFloat($('#1sfa1').val()) + parseFloat($('#1sfa2').val()) + parseFloat($('#1sfa3').val());
    sf2 = parseFloat($('#2sfa1').val()) + parseFloat($('#2sfa2').val()) + parseFloat($('#2sfa3').val());
    sf3 = parseFloat($('#3sfa1').val()) + parseFloat($('#3sfa2').val()) + parseFloat($('#3sfa3').val());
    sf4 = parseFloat($('#4sfa1').val()) + parseFloat($('#4sfa2').val()) + parseFloat($('#4sfa3').val());
    sf5 = parseFloat($('#5sfa1').val()) + parseFloat($('#5sfa2').val()) + parseFloat($('#5sfa3').val());
    $('#sfTotal1').val(parseFloat(sf1).toFixed(2));
    $('#sfTotal2').val(parseFloat(sf2).toFixed(2));
    $('#sfTotal3').val(parseFloat(sf3).toFixed(2));
    $('#sfTotal4').val(parseFloat(sf4).toFixed(2));
    $('#sfTotal5').val(parseFloat(sf5).toFixed(2));

    /* ------- Hardware Costs ------- */
    hc1 = parseFloat($('#1hc1').val()) + parseFloat($('#1hc2').val()) + parseFloat($('#1hc3').val()) + parseFloat($('#1hc4').val());
    hc2 = parseFloat($('#2hc1').val()) + parseFloat($('#2hc2').val()) + parseFloat($('#2hc3').val()) + parseFloat($('#2hc4').val());
    hc3 = parseFloat($('#3hc1').val()) + parseFloat($('#3hc2').val()) + parseFloat($('#3hc3').val()) + parseFloat($('#3hc4').val());
    hc4 = parseFloat($('#4hc1').val()) + parseFloat($('#4hc2').val()) + parseFloat($('#4hc3').val()) + parseFloat($('#4hc4').val());
    hc5 = parseFloat($('#5hc1').val()) + parseFloat($('#5hc2').val()) + parseFloat($('#5hc3').val()) + parseFloat($('#5hc4').val());
    $('#hcTotal1').val(parseFloat(hc1).toFixed(2));
    $('#hcTotal2').val(parseFloat(hc2).toFixed(2));
    $('#hcTotal3').val(parseFloat(hc3).toFixed(2));
    $('#hcTotal4').val(parseFloat(hc4).toFixed(2));
    $('#hcTotal5').val(parseFloat(hc5).toFixed(2));
  });


  /* ------- Subscription Fees ------- */

  $('#1sfm1, #1sfm2, #1sfm3, #2sfm1, #2sfm2, #2sfm3, #3sfm1, #3sfm2, #3sfm3, #4sfm1, #4sfm2, #4sfm3, #5sfm1, #5sfm2, #5sfm3').on('input', function() {
    $('#1sfa1').val(parseFloat($('#1sfm1').val() * 12));
    $('#1sfa2').val(parseFloat($('#1sfm2').val() * 12));
    $('#1sfa3').val(parseFloat($('#1sfm3').val() * 12));
    $('#2sfa1').val(parseFloat($('#2sfm1').val() * 12));
    $('#2sfa2').val(parseFloat($('#2sfm2').val() * 12));
    $('#2sfa3').val(parseFloat($('#2sfm3').val() * 12));
    $('#3sfa1').val(parseFloat($('#3sfm1').val() * 12));
    $('#3sfa2').val(parseFloat($('#3sfm2').val() * 12));
    $('#3sfa3').val(parseFloat($('#3sfm3').val() * 12));
    $('#4sfa1').val(parseFloat($('#4sfm1').val() * 12));
    $('#4sfa2').val(parseFloat($('#4sfm2').val() * 12));
    $('#4sfa3').val(parseFloat($('#4sfm3').val() * 12));
    $('#5sfa1').val(parseFloat($('#5sfm1').val() * 12));
    $('#5sfa2').val(parseFloat($('#5sfm2').val() * 12));
    return $('#5sfa3').val(parseFloat($('#5sfm3').val() * 12));
  });

  $('#1sfa1, #1sfa2, #1sfa3, #2sfa1, #2sfa2, #2sfa3, #3sfa1, #3sfa2, #3sfa3, #4sfa1, #4sfa2, #4sfa3, #5sfa1, #5sfa2, #5sfa3').on('input', function() {
    $('#1sfm1').val(parseFloat($('#1sfa1').val() / 12));
    $('#1sfm2').val(parseFloat($('#1sfa2').val() / 12));
    $('#1sfm3').val(parseFloat($('#1sfa3').val() / 12));
    $('#2sfm1').val(parseFloat($('#2sfa1').val() / 12));
    $('#2sfm2').val(parseFloat($('#2sfa2').val() / 12));
    $('#2sfm3').val(parseFloat($('#2sfa3').val() / 12));
    $('#3sfm1').val(parseFloat($('#3sfa1').val() / 12));
    $('#3sfm2').val(parseFloat($('#3sfa2').val() / 12));
    $('#3sfm3').val(parseFloat($('#3sfa3').val() / 12));
    $('#4sfm1').val(parseFloat($('#4sfa1').val() / 12));
    $('#4sfm2').val(parseFloat($('#4sfa2').val() / 12));
    $('#4sfm3').val(parseFloat($('#4sfa3').val() / 12));
    $('#5sfm1').val(parseFloat($('#5sfa1').val() / 12));
    $('#5sfm2').val(parseFloat($('#5sfa2').val() / 12));
    return $('#5sfm3').val(parseFloat($('#5sfa3').val() / 12));
  });


  /* ------- Hardware Costs ------- */

  $('#1hcc1, #1hcq1, #1hcc2, #1hcq2, #1hcc3, #1hcq3, #1hcc4, #1hcq4, #1hcc5, #2hcq5, #2hcc1, #2hcq1, #2hcc2, #2hcq2, #2hcc3, #2hcq3, #2hcc4, #2hcq4, #2hcc5, #2hcq5, #3hcc1, #3hcq1, #3hcc2, #3hcq2, #3hcc3, #3hcq3, #3hcc4, #3hcq4, #3hcc5, #3hcq5, #4hcc1, #4hcq1, #4hcc2, #4hcq2, #4hcc3, #4hcq3, #4hcc4, #4hcq4, #4hcc5, #4hcq5, #5hcc1, #5hcq1, #5hcc2, #5hcq2, #5hcc3, #5hcq3, #5hcc4, #5hcq4, #5hcc5, #5hcq5').on('input', function() {
    $('#1hc1').val(parseFloat($('#1hcc1').val()) * (parseFloat($('#1hcq1').val())));
    $('#1hc2').val(parseFloat($('#1hcc2').val()) * (parseFloat($('#1hcq2').val())));
    $('#1hc3').val(parseFloat($('#1hcc3').val()) * (parseFloat($('#1hcq3').val())));
    $('#1hc4').val(parseFloat($('#1hcc4').val()) * (parseFloat($('#1hcq4').val())));
    $('#1hc5').val(parseFloat($('#1hcc5').val()) * (parseFloat($('#1hcq5').val())));
    $('#2hc1').val(parseFloat($('#2hcc1').val()) * (parseFloat($('#2hcq1').val())));
    $('#2hc2').val(parseFloat($('#2hcc2').val()) * (parseFloat($('#2hcq2').val())));
    $('#2hc3').val(parseFloat($('#2hcc3').val()) * (parseFloat($('#2hcq3').val())));
    $('#2hc4').val(parseFloat($('#2hcc4').val()) * (parseFloat($('#2hcq4').val())));
    $('#2hc5').val(parseFloat($('#2hcc5').val()) * (parseFloat($('#2hcq5').val())));
    $('#3hc1').val(parseFloat($('#3hcc1').val()) * (parseFloat($('#3hcq1').val())));
    $('#3hc2').val(parseFloat($('#3hcc2').val()) * (parseFloat($('#3hcq2').val())));
    $('#3hc3').val(parseFloat($('#3hcc3').val()) * (parseFloat($('#3hcq3').val())));
    $('#3hc4').val(parseFloat($('#3hcc4').val()) * (parseFloat($('#3hcq4').val())));
    $('#3hc5').val(parseFloat($('#3hcc5').val()) * (parseFloat($('#3hcq5').val())));
    $('#4hc1').val(parseFloat($('#4hcc1').val()) * (parseFloat($('#4hcq1').val())));
    $('#4hc2').val(parseFloat($('#4hcc2').val()) * (parseFloat($('#4hcq2').val())));
    $('#4hc3').val(parseFloat($('#4hcc3').val()) * (parseFloat($('#4hcq3').val())));
    $('#4hc4').val(parseFloat($('#4hcc4').val()) * (parseFloat($('#4hcq4').val())));
    $('#4hc5').val(parseFloat($('#4hcc5').val()) * (parseFloat($('#4hcq5').val())));
    $('#5hc1').val(parseFloat($('#5hcc1').val()) * (parseFloat($('#5hcq1').val())));
    $('#5hc2').val(parseFloat($('#5hcc2').val()) * (parseFloat($('#5hcq2').val())));
    $('#5hc3').val(parseFloat($('#5hcc3').val()) * (parseFloat($('#5hcq3').val())));
    $('#5hc4').val(parseFloat($('#5hcc4').val()) * (parseFloat($('#5hcq4').val())));
    return $('#5hc5').val(parseFloat($('#5hcc5').val()) * (parseFloat($('#5hcq5').val())));
  });
  
   /* ------- Total ------- */
    total = parseFloat(t1 + t2 + t3 + t4 + t5).toFixed(2);
    return $('#TotalCost').val(total);

}).call(this);
<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="all">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="container-fluid">
      <form id="msform">
        <fieldset id="table-two" class="table container-fluid">
          <div class="year1">
            <div class="row">
              <div class="col-xs-12">
                <h2 class="fs-title">Subscription Fees</h2>
              </div>
            </div>
            <div id="head2" class="head">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-sm-offset-6 col-sm-2 col-xs-offset-3 col-xs-3">
                    <h3>Monthly Fee</h3>
                  </div>
                  <div class="col-sm-offset-2 col-sm-2 col-xs-offset-3 col-xs-3">
                    <h3>Annual Spend</h3>
                  </div>
                </div>
              </div>
            </div>
            <h4>Year 1</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>1st Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1sfm1" name="1sfm1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1sfa1" name="1sfa1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>2nd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1sfm2" name="1sfm2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1sfa2" name="1sfa2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>3rd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1sfm3" name="1sfm3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1sfa3" name="1sfm4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="year2">
            <h4>Year 2</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>1st Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2sfm1" name="2sfm1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2sfa1" name="2sfa1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>2nd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2sfm2" name="2sfm2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2sfa2" name="2sfa2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>3rd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2sfm3" name="2sfm3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2sfa3" name="2sfa3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="year3">
            <h4>Year 3</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>1st Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3sfm1" name="3sfm1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3sfa1" name="3sfa1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>2nd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3sfm2" name="3sfm2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3sfa2" name="3sfa2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>3rd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3sfm3" name="3sfm3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3sfa3" name="3sfa3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="year4">
            <h4>Year 4</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>1st Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4sfm1" name="5sfm1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4sfa1" name="4sfa1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>2nd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4sfm2" name="4sfm2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4sfa2" name="4sfa2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>3rd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4sfm3" name="4sfm3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4sfa3" name="4sfa3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="year5">
            <h4>Year 5</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>1st Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5sfm1" name="5sfm1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5sfa1" name="5sfa1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>2nd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5sfm2" name="5sfm2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5sfa2" name="5sfa2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>3rd Doctor</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5sfm3" name="5sfm3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <p>x12 mo</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5sfa3" name="5sfa3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
 </fieldset>
        <fieldset id="table-three" class="table container-fluid">
          <div class="year1">
            <div class="row">
              <div class="col-xs-12">
                <h2>Hardware Costs</h2>
              </div>
            </div>
            <div id="head3" class="head">
              <div class="container-fluid">
                <div class="col-md-offset-6 col-sm-2 col-xs-1 col-xs-offset-6">
                  <h3>Cost/Device</h3>
                </div>
                <div class="col-sm-2 col-xs-1">
                  <h3>Quantity</h3>
                </div>
                <div class="col-sm-2 col-xs-1">
                  <h3>Annual Spend</h3>
                </div>
              </div>
            </div>
            <h4>Year 1</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Computers/Laptops</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1hcc1" name="1hcc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="1hcq1" name="1hcq1" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1hc1" name="1hc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>iPads</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1hcc2" name="1hcc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="1hcq2" name="1hcq2" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1hc2" name="1hc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Android Tablets</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1hcc3" name="1hcc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="1hcq3" name="1hcq3" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1hc3" name="1hc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Servers</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1hcc4" name="1hcc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="1hcq4" name="1hcq4" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="1hc4" name="1hc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="year2">
            <h4>Year 2</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Computers/Laptops</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2hcc1" name="2hcc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="2hcq1" name="2hcq1" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2hc1" name="2hc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>iPads</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2hcc2" name="2hcc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="2hcq2" name="2hcq2" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2hc2" name="2hc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Android Tablets</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2hcc3" name="2hcc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="2hcq3" name="2hcq3" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2hc3" name="2hc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Servers</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2hcc4" name="2hcc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="2hcq4" name="2hcq4" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="2hc4" name="2hc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="year3">
            <h4>Year 3</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Computers/Laptops</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3hcc1" name="3hcc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="3hcq1" name="3hcq1" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3hc1" name="3hc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>iPads</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3hcc2" name="3hcc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="3hcq2" name="3hcq2" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3hc2" name="3hc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Android Tablets</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3hcc3" name="3hcc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="3hcq3" name="3hcq3" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3hc3" name="3hc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Servers</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3hcc4" name="3hcc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="3hcq4" name="3hcq4" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="3hc4" name="3hc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="year4">
            <h4>Year 4</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Computers/Laptops</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4hcc1" name="4hcc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="4hcq1" name="4hcq1" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4hc1" name="4hc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>iPads</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4hcc2" name="4hcc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="4hcq2" name="4hcq2" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4hc2" name="4hc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Android Tablets</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4hcc3" name="4hcc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="4hcq3" name="4hcq3" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4hc3" name="4hc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Servers</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4hcc4" name="4hcc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="4hcq4" name="4hcq4" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="4hc4" name="4hc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          <div class="year5">
            <h4>Year 5</h4>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Computers/Laptops</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5hcc1" name="5hcc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="5hcq1" name="5hcq1" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5hc1" name="5hc1" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>iPads</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5hcc2" name="5hcc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="5hcq2" name="5hcq2" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5hc2" name="5hc2" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Android Tablets</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5hcc3" name="5hcc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="5hcq3" name="5hcq3" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5hc3" name="5hc3" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-xs-3">
                <p>Servers</p>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5hcc4" name="5hcc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">x</span>
                  <input type="number" id="5hcq4" name="5hcq4" step="1" value="0" placeholder="0" class="form-control">
                </div>
              </div>
              <div class="col-sm-2 col-xs-3">
                <div class="input-group"><span class="input-group-addon">$</span>
                  <input type="number" id="5hc4" name="5hc4" step="0.01" value="0.00" placeholder="0.00" class="form-control">
                </div>
              </div>
            </div>
          </div>
          </fieldset>
        
        <fieldset id="table-seven" class="table container-fluid">
          <div class="row">
            <div class="col-xs-offset-2 col-xs-2"> 
              <h3>Year 1</h3>
            </div>
            <div class="col-xs-2">
              <h3>Year 2</h3>
            </div>
            <div class="col-xs-2"> 
              <h3>Year 3</h3>
            </div>
            <div class="col-xs-2">
              <h3>Year 4</h3>
            </div>
            <div class="col-xs-2">
              <h3>Year 5</h3>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-2">
              <p>Subscription Fees</p>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="sfTotal1" name="sfTotal1" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="sfTotal2" name="sfTotal2" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="sfTotal3" name="sfTotal3" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="sfTotal4" name="sfTotal4" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="sfTotal5" name="sfTotal5" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-2">
              <p>Hardware Costs</p>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="hcTotal1" name="hcTotal1" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="hcTotal2" name="hcTotal2" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="hcTotal3" name="hcTotal3" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="hcTotal4" name="hcTotal4" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
            <div class="col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="hcTotal5" name="hcTotal5" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-offset-8 col-xs-2">
              <p class="total">Total Cost of Ownership</p>
            </div>
            <div class="col-sm-2 col-xs-2">
              <div class="input-group"><span class="input-group-addon">$</span>
                <input type="number" id="TotalCost" name="TotalCost" value="0.00" placeholder="0.00" readonly class="form-control">
              </div>
            </div>
          </div>
       </fieldset>
      </form>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <!--  <script>$(document).ready(function(){$(".submit").click(function(a){a.preventDefault();var e=$("#msform").serializeArray();$.ajax({url:"send.php",type:"POST",data:e,cache:!1,success:function(a){$(".data").html(a)}})})});</script> -->
</html>

\$\endgroup\$
1

3 Answers 3

Reset to default
2
\$\begingroup\$

This code works, but could really do with a big redesign. If you wanted to make a small change to this, it would be a nightmare. I would suggest some sort of for loop and using functions to simplify the code. For example:

function update_to_product (inOne, inTwo, out) {
     $(out).val(parseFloat($(inOne).val()) * (parseFloat($(inTwo).val())));
}

and then use a for loop to create those IDs programmatically. This will massively reduce the amount of code and make it easier to read.

//Make ids (ie in1 = "#1hcc1", in2 = "#1hcq1", out "#1hc1")
update_to_product(in1, in2, out)

you can do this for every calculation set.

\$\endgroup\$
1
  • \$\begingroup\$ With this in mind I did some more studying and have added an updated snippet. I wasn't able to get a change event to work within the for loop of DivBox and ended up repeating the loop in DoDivBox. Any suggestions? \$\endgroup\$
    – deliciouscheese
    Commented Mar 23, 2016 at 13:38
1
\$\begingroup\$

As suggested by Vogon Jeltz, I studied up more on For Loops and Functions and came up with the following revision:

function DivBox( col, row )
{
    var ret = "";
    
    for( var r = 0; r < row ; r++ )
    {
        ret += '<div class="year'+(r+1)+'"><div id="head2" class="head container-fluid row"><h3>Year '+(r+1)+'</h3></div><div class="row table" id="Column'+(r+1)+'" >';
        
        for( var c = 0; c < col; c++ )
        {
                        var idM = (r+1)+"sfm"+(c+1);
                var idA = (r+1)+"sfa"+(c+1);
            
            ret += '<div class="row"><div class="col-sm-6 col-xs-3"><p>Doctor '+(c+1)+'</p></div><div class="col-sm-2 col-xs-3"><div class="input-group"><span class="input-group-addon">$</span><input type="number" id="'+idM+'" name="'+idM+'" step="0.01" value="0.00" placeholder="0.00" class="form-control"></div></div><div class="col-sm-2 col-xs-3"><p>x12 mo</p></div><div class="col-sm-2 col-xs-3"><div class="input-group"><span class="input-group-addon">$</span><input type="number" id="'+idA+'" name="'+idA+'" step="0.01" value="" placeholder="0.00" class="form-control"></div></div></div>'; 
        }
        ret += '</div></div>';              
    }
    return ret;
       
}

$(document).on( "ready", function DoDivBox( col, row )
{
    var obj = document.getElementById("SubFees");
    var col = 5;
    var row = 3;
    obj.innerHTML = DivBox( row, col );
    
    $("#SubFees").on("change input keyup", function(){
        for( var r = 0; r <= row ; r++ ) {
        for( var c = 0; c <= col; c++ ) {
         var idM = (c+1)+"sfm"+(r+1);
         var idA = (c+1)+"sfa"+(r+1);
         $("#"+idA).val(parseFloat($("#"+idM).val() * 12).toFixed(2));
      }}})
    
})
form {max-width: 90%; margin: 0 auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="all">
<body>
<form>
  <fieldset id="SubFees">
  
  </fieldset>
</form>
</body>

I couldn't get the change event function to work within the DivBox for loop though so I ended up repeating the for loop in DoDivBox.

\$\endgroup\$
1
\$\begingroup\$

A few ideas ...

To DRY-off the javascript :

  • For efficient selection of DOM elemenmts, in the HTML give a className to each related groups of inputs, eg. "sfm", "sfa", "hcc", "hcq".
  • Reduce reliance on IDs.
  • Allow the input handlers to handle just the triggering change. It's not necessary to perform all related calcs on all occasions. Others will look after themselves if/when they are triggered.
  • For each handler, develop an efficient generalized function to express the desired effect.
  • Exploit Array.prototype.reduce() to sum values.

Other considerations :

  • Wrap in jQuery(function($) {...})
  • Attach handlers such that the calculation of totals is performed after the intra-row stuff, and calculate the grand total in the same handler.
  • Convert string to number, with the syntactically convenient +foo instead of parseFloat(foo).
  • Set min="0" attributes on the inputs to prevent them going negative.
  • Javascript functions don't require an explicit return unless the caller expects a return value.

I ended up with this :

jQuery(function($) {
	// ----- fixed data -----
	var sf = { n:3, els:$('.sfa') },
		hc = { n:4, els:$('.hc') },
		years = 5;

	// ----- utility functions -----
	function sumValues(runningTotal, el) {
		return runningTotal + +el.value;
	}

	/* ------- Subscription Fees ------- */
	$('.sfm').on('input', function() {
		$(this).closest('.row').find('input.sfa').val(this.value * 12);
	});
	$('.sfa').on('input', function() {
		$(this).closest('.row').find('input.sfm').val(this.value / 12);
	});

	/* ------- Hardware Costs ------- */
	$('.hcc').on('input', function() {
		var $row = $(this).closest('.row');
		$row.find('.hc').val(this.value * $row.find('.hcq').val());
	});
	$('.hcq').on('input', function() {
		var $row = $(this).closest('.row');
		$row.find('.hc').val(this.value * $row.find('.hcc').val());
	});

	/* ------- Totals ------- */
	$('#msform input').on('change keyup input', function() {
		var i, t1, t2, total = 0;
		for(i=0; i<years; i++) {
			t1 = sf.els.get().slice(sf.n*i, sf.n*(i+1)).reduce(sumValues, 0).toFixed(2);
			t2 = hc.els.get().slice(hc.n*i, hc.n*(i+1)).reduce(sumValues, 0).toFixed(2);
			$('.sfTotal').eq(i).val(t1); // Subscription Fees
			$('.hcTotal').eq(i).val(t2); // Hardware Costs
			total += +t1;
			total += +t2;
		}
		$('#TotalCost').val(total.toFixed(2));
	});
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="all">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>
<div class="container-fluid">
  <form id="msform">
	<fieldset id="table-two" class="table container-fluid">
	  <div class="year1">
		<div class="row">
		  <div class="col-xs-12">
			<h2 class="fs-title">Subscription Fees</h2>
		  </div>
		</div>
		<div id="head2" class="head">
		  <div class="container-fluid">
			<div class="row">
			  <div class="col-sm-offset-6 col-sm-2 col-xs-offset-3 col-xs-3">
				<h3>Monthly Fee</h3>
			  </div>
			  <div class="col-sm-offset-2 col-sm-2 col-xs-offset-3 col-xs-3">
				<h3>Annual Spend</h3>
			  </div>
			</div>
		  </div>
		</div>
		<h4>Year 1</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>1st Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1sfm1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1sfa1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>2nd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1sfm2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1sfa2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>3rd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1sfm3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1sfa4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
	  </div>
	  <div class="year2">
		<h4>Year 2</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>1st Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2sfm1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2sfa1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>2nd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2sfm2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2sfa2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>3rd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2sfm3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2sfa3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
	  </div>
	  <div class="year3">
		<h4>Year 3</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>1st Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3sfm1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3sfa1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>2nd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3sfm2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3sfa2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>3rd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3sfm3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3sfa3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
	  </div>
	  <div class="year4">
		<h4>Year 4</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>1st Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5sfm1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4sfa1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>2nd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4sfm2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4sfa2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>3rd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4sfm3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4sfa3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
	  </div>
	  <div class="year5">
		<h4>Year 5</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>1st Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5sfm1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5sfa1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>2nd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5sfm2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5sfa2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>3rd Doctor</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5sfm3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfm">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<p>x12 mo</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5sfa3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control sfa">
			</div>
		  </div>
		</div>
	  </div>
    </fieldset>
	<fieldset id="table-three" class="table container-fluid">
	  <div class="year1">
		<div class="row">
		  <div class="col-xs-12">
			<h2>Hardware Costs</h2>
		  </div>
		</div>
		<div id="head3" class="head">
		  <div class="container-fluid">
			<div class="col-md-offset-6 col-sm-2 col-xs-1 col-xs-offset-6">
			  <h3>Cost/Device</h3>
			</div>
			<div class="col-sm-2 col-xs-1">
			  <h3>Quantity</h3>
			</div>
			<div class="col-sm-2 col-xs-1">
			  <h3>Annual Spend</h3>
			</div>
		  </div>
		</div>
		<h4>Year 1</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Computers/Laptops</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1hcc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="1hcq1" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1hc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>iPads</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1hcc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="1hcq2" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1hc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Android Tablets</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1hcc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="1hcq3" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1hc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Servers</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1hcc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="1hcq4" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="1hc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
	  </div>
	  <div class="year2">
		<h4>Year 2</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Computers/Laptops</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2hcc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="2hcq1" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2hc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>iPads</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2hcc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="2hcq2" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2hc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Android Tablets</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2hcc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="2hcq3" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2hc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Servers</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2hcc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="2hcq4" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="2hc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
	  </div>
	  <div class="year3">
		<h4>Year 3</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Computers/Laptops</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3hcc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="3hcq1" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3hc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>iPads</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3hcc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="3hcq2" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3hc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Android Tablets</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3hcc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="3hcq3" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3hc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Servers</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3hcc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="3hcq4" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="3hc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
	  </div>
	  <div class="year4">
		<h4>Year 4</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Computers/Laptops</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4hcc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="4hcq1" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4hc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>iPads</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4hcc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="4hcq2" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4hc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Android Tablets</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4hcc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="4hcq3" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4hc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Servers</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4hcc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="4hcq4" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="4hc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
	  </div>
	  <div class="year5">
		<h4>Year 5</h4>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Computers/Laptops</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5hcc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="5hcq1" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5hc1" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>iPads</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5hcc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="5hcq2" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5hc2" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Android Tablets</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5hcc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="5hcq3" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5hc3" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-xs-3">
			<p>Servers</p>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5hcc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hcc">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">x</span>
			  <input type="number" name="5hcq4" min="0" step="1" value="0" placeholder="0" class="form-control hcq">
			</div>
		  </div>
		  <div class="col-sm-2 col-xs-3">
			<div class="input-group"><span class="input-group-addon">$</span>
			  <input type="number" name="5hc4" min="0" step="0.01" value="0.00" placeholder="0.00" class="form-control hc">
			</div>
		  </div>
		</div>
	  </div>
	</fieldset>
	
	<fieldset id="table-seven" class="table container-fluid">
	  <div class="row">
		<div class="col-xs-offset-2 col-xs-2"> 
		  <h3>Year 1</h3>
		</div>
		<div class="col-xs-2">
		  <h3>Year 2</h3>
		</div>
		<div class="col-xs-2"> 
		  <h3>Year 3</h3>
		</div>
		<div class="col-xs-2">
		  <h3>Year 4</h3>
		</div>
		<div class="col-xs-2">
		  <h3>Year 5</h3>
		</div>
	  </div>
	  <div class="row">
		<div class="col-xs-2">
		  <p>Subscription Fees</p>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="sfTotal1" value="0.00" placeholder="0.00" readonly class="form-control sfTotal">
		  </div>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="sfTotal2" value="0.00" placeholder="0.00" readonly class="form-control sfTotal">
		  </div>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="sfTotal3" value="0.00" placeholder="0.00" readonly class="form-control sfTotal">
		  </div>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="sfTotal4" value="0.00" placeholder="0.00" readonly class="form-control sfTotal">
		  </div>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="sfTotal5" value="0.00" placeholder="0.00" readonly class="form-control sfTotal">
		  </div>
		</div>
	  </div>
	  <div class="row">
		<div class="col-xs-2">
		  <p>Hardware Costs</p>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="hcTotal1" value="0.00" placeholder="0.00" readonly class="form-control hcTotal">
		  </div>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="hcTotal2" value="0.00" placeholder="0.00" readonly class="form-control hcTotal">
		  </div>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="hcTotal3" value="0.00" placeholder="0.00" readonly class="form-control hcTotal">
		  </div>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="hcTotal4" value="0.00" placeholder="0.00" readonly class="form-control hcTotal">
		  </div>
		</div>
		<div class="col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" name="hcTotal5" value="0.00" placeholder="0.00" readonly class="form-control hcTotal">
		  </div>
		</div>
	  </div>

	  <div class="row">
		<div class="col-xs-offset-8 col-xs-2">
		  <p class="total">Total Cost of Ownership</p>
		</div>
		<div class="col-sm-2 col-xs-2">
		  <div class="input-group"><span class="input-group-addon">$</span>
			<input type="number" id="TotalCost" name="TotalCost" value="0.00" placeholder="0.00" readonly class="form-control">
		  </div>
		</div>
	  </div>
   </fieldset>
  </form>
</div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <!--  <script>$(document).ready(function(){$(".submit").click(function(a){a.preventDefault();var e=$("#msform").serializeArray();$.ajax({url:"send.php",type:"POST",data:e,cache:!1,success:function(a){$(".data").html(a)}})})});</script> -->
</html>

You might also consider keeping the html DRY by templating/cloning the repeated sections.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.