JSFiddle - React, Tailwind, and code Playground

by Vatsal Pande

HTML

<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<div class="well form-group  ">
                            <div class="col-sm-2 col-md-2"><label for="underlay2">Underlayments:</label></div>
                            <div class="col-sm-4 col-md-4"><select class="form-control product_id" name="product_code[4]"><option selected="selected" value="">None</option><option value="789">BP #15 Plain Felt 36&quot; | $10.00</option><option value="790">BP #30 Plain Felt 36&quot; | $10.00</option></select></div>
                            <div class="col-sm-1  col-md-1"><label for="underlay2_req">Quantity:</label></div>
                            <div class="col-sm-2 col-md-2"><input class="form-control  quantity" name="quantity[4]" type="text"></div>
                            <div class="col-sm-1  col-md-1"><label for="cost">Cost:</label></div>
                            <div class="col-sm-2 col-md-2">
                            <input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value=""></div>
                            
                            <input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value="">
                            
                            <input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value="">
                        </div>
                        
<input type = "text" id="total" >

JavaScript

var runningTotal = 0; // THIS IS DECLARED AS A GLOBAL

$(document).ready(function(){
	$("input.quantity").on('change', function() {

    var row = $(this).parents(':eq(1)').find('input').filter(".cost");
    //var price = row.data('price');

		var price = 10 ;//Computed from different function
    if (price) {
        var quantity = parseFloat($(this).val());
        
        var cost = (price * quantity);
				
        alert(cost);
        row.val(cost);  // COST INSERTED HERE!!

                 $("input.cost").each(function(){
                     var ic = $(this).val(); // TRIED USING HTML AND TEXT METHODS.  
                     var inputCost = Number(ic);
                     runningTotal += inputCost;
                 });

             $("#total").val(runningTotal);


         }
});
});