JSFiddle - React, Tailwind, and code Playground

by SteveRobertson

HTML

<body>

		
		<table id="quote" data-theme="cyan1" width=100%>
			<thead>
				<tr>
					<th width=20%> Item  </th>
					<th width=55%> Description </th>
					<th> Price </th>
				</tr>
			</thead>

 <!-- the template that creates the new row items -->
			<tr class="template" style="display:none;">
				<td><span class="item_num"> Num </span></td>
				<td><span class="item_desc"> Description </span></td>
				<td><span class="item_price"> Price </span></td>
			</tr>
			
			
<!-- Just used to get the total price aligned with the other price values -->			
			<tr>
				<td id="pricerow1"</td>
				<td id="pricerow2"></td>
				<td id="pricerow3"><p id="totalPrice" align="left"></p></td>
			</tr>
		</table>
		

            
  <!-- the add item button brings up the pop up, second one does nothing, third submits the hidden form element -->         
		<a href="#addquoteitem" data-rel="popup" data-role="button" data-theme="a" data-position-to="window" data-transition="flip">Add Item</a>
		<a href="#" data-role="button" data-theme="a"> Place Holder </a>
		<a href="#" data-role="button" onclick="return submitform()" data-theme="a" value="Submit Quote">Submit</a>
				
         


		
		
			
			
			
			
		<!-- a hidden form to submit the added elements, which is called by the submit button, defined right overhead-->
		<form name="hiddenform" id="hiddenform" action="/scape/addjob/<%= rec.ID %>" method="POST">
		</form>
	
 <!-- a small script to validate that a description was filled in -->
	<script>
        function submitform() {
            if(!hiddenform.description){
                alert('Quote must include atleast one service');    
                return false;
            }
            else {
                alert("form submitted")
            }
        }
	</script>
		
		

		
		
<!-- my pop up defined -->		
		
		<div data-role="popup" id="addquoteitem" data-theme="cyan1">
			<form id="addthisquote" autocomplete="off">
				<label for="description"> Description:...

JavaScript

$(document).ready(function() {
    //counter to increase item# for each "Add Item" submission
	i=1;
    
    //the function called upon submitting the form in the pop up
	$('#addthisquote').submit(function() {
	
        //this assigns the form inputs the variables
		var description = $('#description').val();
		var price = $('#price').val();
		
        //this creates a clone of the template, and an object with the values that
        //are to be inserted
		var newRow = $('#quote .template').clone().removeClass('template');
		var quoteItem = {
			number: i,
			description: description,
			price: price,			
		};
		
		
		
		
		//calling the template function, with parameters of a copied template
        //and an object with the values to be inserted
		template(newRow, quoteItem)
            .insertAfter('#quote tr.template')
            .fadeIn();
		
        //this calls a hidden input function, which creates form inputs(not actually
        //hidden) because I thought that was the best way to submit the description  
        // and price
		hiddeninputs(i, description, price);
		
        //this is a function call just to update the total price
		changeVal();
		
        //these lines just clear the popup values, increment counter, and close               //popup
		$('#description').val('');
		$('#price').val('');
		i++;
		$('#addquoteitem').popup("close");
		 
		return false;
	});
});

//the function that creates the new rows
function template(row, quoteItem) {
  row.find('.item_num').text(quoteItem.number);
  row.find('.item_desc').text(quoteItem.description);
  row.find('.item_price').text(quoteItem.price);
  return row;
}

//creates hidden inputs to submit the jobdetails easier
function hiddeninputs(i, description, price) {
	$("<input type='text'/>")
		.attr("value", description)
		.attr("id", "testid")
		.attr("name", "description")
		.appendTo("#hiddenform");
	$("<input type='text'/>")
		.attr("value", price)
		.attr("id", "testid")
		.attr("name",...