JSFiddle - React, Tailwind, and code Playground

by NicoleScotsburn

HTML

<script src="http://192.168.3.30/employees/js/jquery.calculation.js"></script>
<script src="http://192.168.3.30/employees/js/jquery.field.js"></script>
<form method="post" action="" enctype="multipart/form-data" name="expense">
  
    
   <div id="items">
    <h2><a href="#" id="addItem">Add New Row</a></h2>
	
    <table>
    <thead>
    <tr>
    <th>DATE</th>	
    <th>DESCRIPTION</th>	
    <th>ENTMT.</th>		
    <th>MEALS*</th>		
    <th>OTHER</th>	
    <th>TRAVEL</th>	                		
    <th>LODGING</th>	
    <th>HST</th>
    </tr>	
	</thead>
	
	<tr>
    <td>
        <label for="date"><input type="text" id="date" size="10" name="date" value="" placeholder="mm/dd/yyyy" /></label>
    </td>
    <td>
        <label for="desc"><input type="text" id="desc" size="30" name="desc" value="" placeholder="" /></label>
    </td>
    <td>
        <label for="entmt">$<input type="text" id="sum" size="10" name="entmt" value="" placeholder="0.00" /></label>
    </td>
    <td>
        <label for="meals">$<input type="text" id="sum" size="10" name="meals" value="" placeholder="0.00" /></label>
    </td>
    <td>
        <label for="other">$<input type="text" id="sum" size="10" name="other" value="" placeholder="0.00" /></label>
    </td>
    <td>
        <label for="travel">$<input type="text" id="sum" size="10" name="travel" value="" placeholder="0.00" /></label>
    </td>
    <td>
        <label for="lodging">$<input type="text" id="sum" size="10" name="lodging" value="" placeholder="0.00" /></label>
    </td>
    <td>
        <label for="hst">$<input type="text" id="sum" size="10" name="hst" value="" placeholder="0.00" /></label>
    </td>
	</tr>
    </table>
    
  	
</div>

<br><br>
&nbsp; <label for="total">Total: $<input type="text" name="totalSum" id="totalSum" value="" size="15" readonly="readonly" /></label>
<br><br>  

<div id="mileage">

<h2><a href="#" id="addMileage">Add New Row</a></h2>
	
    <table>
    <thead>
    <tr>
    <th>DATE</th>	
   ...

CSS

<style>
* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>

JavaScript

var bIsFirebugReady = (!!window.console && !!window.console.log);

	$(document).ready(function (){

			$("input[id^=sum]").sum("keyup", "#totalSum");
			

			$(function() {
				
				//Increment Variables
			    var items = $('#items');
			    var i = $('#items td').size() + 1;
			    var mileage = $('#mileage');
			    var j = $('#mileage td').size() + 1;

			    //Append Table Rows
			    $('#addItem').on('click', function() {
			            $('<tr><td>&nbsp;<label for="date"><input type="text" id="date" size="10" name="date_' + i +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
			              '<td>&nbsp;<label for="desc"><input type="text" id="desc" size="30" name="desc_' + i +'" /></label></td>' +
			              '<td>&nbsp;$<label for="entmt"><input type="text" id="sum" size="10" name="entmt_' + i +'" placeholder="0.00" /></label></td>' +
			              '<td>&nbsp;$<label for="meals"><input type="text" id="sum" size="10" name="meals_' + i +'" placeholder="0.00" /></label></td>' +
			              '<td>&nbsp;$<label for="other"><input type="text" id="sum" size="10" name="other_' + i +'" placeholder="0.00" /></label></td>' +
			              '<td>&nbsp;$<label for="travel"><input type="text" id="sum" size="10" name="travel_' + i +'" placeholder="0.00" /></label></td>' +
			              '<td>&nbsp;$<label for="lodging"><input type="text" id="sum" size="10" name="lodging_' + i +'" placeholder="0.00" /></label></td>' +
			              '<td>&nbsp;$<label for="hst"><input type="text" id="sum" size="10" name="hst_' + i +'" placeholder="0.00" /></label></td>' +
			              '<td>&nbsp;<a href="#" id="remItem">Remove</a></td></tr>').appendTo(items);
			            i++;
			            return false;
			    });

			    $('#addMileage').on('click', function() {
			            $('<tr><td>&nbsp;<label for="mdate"><input type="text" id="mdate" size="10" name="mdate' + j +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
			             ...