jQuery addClass example

Change class name on click in jQuery

by mattopen

HTML

<tbody>
              <tr>
                <td style="width: 60%;">
                  <h5>Tuition Fees </h5>
                </td>
                <td>
                  <input class="form-control" id="tuition" name="tuition_fees" type="text"
                  placeholder="Enter Tuition Fees..." value=""  style="border:none;" />

                </td>
              </tr>
              <tr>
                <td style="width: 60%;">
                  <h5>PTA Dues </h5>
                </td>
                <td>
                  <input class="form-control" id="pta" name="PTA_dues" type="text"
                  placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />

                </td>
              </tr>
               <tr>
                <td style="width: 60%;">
                  <h5>Transport Fares </h5>
                </td>
                <td>
                  <input class="form-control" id="transport" name="transport_fares" type="text"
                  placeholder="Enter Transport Fare..." value="" style="border:none;" />
                </td>
              </tr>
               <tr>
                <td colspan="2" >
                  <h5>Additional Fees </h5>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered table-hover table-striped" id="invoiceItem">
            <tbody>
              <tr>

                  <td style="width: 60%;"><div class="row">
                    <div class="col-md-1"><input class="itemRow" type="checkbox"></div>
                    <div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control price" autocomplete="off"></div></div></td>
              <td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control" autocomplete="off"></td>
              </tr>
            </tbody>

         ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$("html,body").find("input").on("keyup",function(){
console.log(this.val())
            var closestParent = $(this).closest('tr');
         var total = closestParent.find(".price").val(); 
         var tuition = document.getElementById("tuition").value;
         var pta = document.getElementById("pta").value;
         var transport = document.getElementById("transport").value;
         var totals = parseInt(total);
          var t = 0;
         $('.price').each(function(i,e){ 
            var amt =$(this).val()-0;  
                var z = t+=amt;
                var totalz = z +  tuition + transport +  pta;
                document.getElementById("tot").value=tuition;
         console.log(t);
         console.log(tuition)

         })

           });