I’m a PHP guy who is finally getting his hands dirty with jQuery. I’m trying to replicate some of the functionality of this form (https://www.barracuda.com/purchase), specifically the part totaling up the amounts of the items selected, and being able to add another product by cloning the form.
Up until this morning (before I added cloning) it was working perfectly, even though the jQuery is a bloated monster; full of replicated code. I’m basically doing this by hobbling bits and pieces together, as I’m not well-versed on creating and using functions in jQuery.
Anyway, I need to get this to clone the form (which it does) AND add up the totals of ALL forms (which it doesn’t). That last bit (the adding of the totals) is where I’m stuck. Any help would be much appreciated. Please, no flaming about the code, I know it’s terrible. 
<form action="form.php" id="order" method="post">
<table class="products" id="tbl_products" style="margin-bottom:0; padding-bottom:0">
<tr>
<th style="width:30%">Product</th>
<th style="width:50%">Configuration</th>
<th style="width:10%"> </th>
<th style="width:10%"> </th>
</tr>
</table>
<div id="order_container">
<div id="fields_1">
<table>
<tr>
<td>
<select name="product" class="product">
<option value="Product 1">Product 1 ($1000)</option>
<option value="Product 2">Product 2 ($2000)</option>
<option value="Product 3">Product 3 ($3000)</option>
<option value="Product 4">Product 4 (call)</option>
<option value="Product 5">Product 5 (call)</option>
</select>
</td>
<td>
<div id="prod1">
<label for="rep1tbdt"><input type="checkbox" name="rep1tbdt" class="rep1tbdt" id="rep1tbdt" value="Option 1: $100"> Option 1: $100</label><br>
<label for="upg1tbdt"><input type="checkbox" name="upg1tbdt" class="upg1tbdt" id="upg1tbdt" value="Option 2: $200"> Option 2: $200</label>
</div>
<div id="prod2" style="display:none">
<label for="rep1tbrm"><input type="checkbox" name="rep1tbrm" class="rep1tbrm" id="rep1tbrm" value="Option 1: $300"> Option 1: $300</label><br>
<label for="upg1tbrm"><input type="checkbox" name="upg1tbrm" class="upg1tbrm" id="upg1tbrm" value="Option 2: $400"> Option 2: $400</label>
</div>
<div id="prod3" style="display:none">
<label for="rep6tbrm"><input type="checkbox" name="rep6tbrm" class="rep6tbrm" id="rep6tbrm" value="Option 1: $500"> Option 1: $500</label><br>
<label for="upg6tbrm"><input type="checkbox" name="upg6tbrm" class="upg6tbrm" id="upg6tbrm" value="Option 2: $600"> Option 2: $600</label>
</div>
<div id="call-pricing" style="display:none">
<label>Call for pricing</label><br>
<label> </label>
</div>
</td>
<td><div id="total">$1000</div></td>
</tr>
</table>
</div>
</div>
<div class="add-button"><a href="#" class="add-item">add another product</a></div>
</form>
<table class="right" id="review_order"">
<thead>
<tr>
<th style="padding-top:0"><h4>Item</h4></th>
<th style="padding:0 20px 0 0; text-align:right"><h4>Price</h4></th>
</tr>
</thead>
<tfoot>
<tr>
<td><h4>Order Total</h4></td>
<td class="order_total" id="order_total"><h4>$1025</h4></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Product Total</td>
<td class="item_total" id="product_total">$1000</td>
</tr>
<tr>
<td>Shipping</td>
<td class="item_total" id="shipping_total">$25</td>
</tr>
<tr>
<td>Tax</td>
<td class="item_total" id="tax_total"></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
// set some defaults
var product_name = 'Product 1';
var product_price = 1000;
var shipping = 25;
var order_total = product_price;
// update pricing and uncheck checkboxes if changed
$('.product').on('change', function() {
var product_name = $(this).val();
if(product_name == 'Product 1') {
product_price = 1000;
$('#call-pricing').hide();
$('#product2').hide();
$('#product3').hide();
$('#product1').show();
}
if(product_name == 'Product 2') {
product_price = 2000;
$('#call-pricing').hide();
$('#product1').hide();
$('#product3').hide();
$('#product2').show();
}
if(product_name == 'Product 3') {
product_price = 3000;
$('#call-pricing').hide();
$('#product2').hide();
$('#product1').hide();
$('#product3').show();
}
if(product_name == 'Product 4' || product_name == 'Product 5') {
product_price = 0;
$('#product2').hide();
$('#product1').hide();
$('#product3').hide();
$('#call-pricing').show();
}
// if switching between products. we want to uncheck the checkboxes so there are no surprises
$('.rep1tbdt').prop('checked', false);
$('.upg1tbdt').prop('checked', false);
$('.rep1tbrm').prop('checked', false);
$('.upg1tbrm').prop('checked', false);
$('.rep6tbrm').prop('checked', false);
$('.upg6tbrm').prop('checked', false);
// update the total with the product price only
$('#total').html('$' + product_price.toFixed(2));
// display the product total
$('#product_total').html('$' + product_price.toFixed(2) + '');
if(product_price == 0) {
$('#product_total').html('$0.00');
$('#shipping_total').html('$0.00');
$('#order_total').html('$0.00');
} else {
// calculate the order total
var order_total = product_price + shipping;
// display the order total
$('#order_total').html('<h4>$' + order_total.toFixed(2) + '</h4>');
}
});
// see if a checkbox is ticked
$(':checkbox').on('change', function() {
// set up our pricing
var rep1tbdt = $('.rep1tbdt').prop('checked') ? 100 : 0;
var upg1tbdt = $('.upg1tbdt').prop('checked') ? 200 : 0;
var rep1tbrm = $('.rep1tbrm').prop('checked') ? 300 : 0;
var upg1tbrm = $('.upg1tbrm').prop('checked') ? 400 : 0;
var rep6tbrm = $('.rep6tbrm').prop('checked') ? 500 : 0;
var upg6tbrm = $('.upg6tbrm').prop('checked') ? 600 : 0;
// calculate the total with the product price and the checkbox price
var total = product_price + rep1tbdt + upg1tbdt + rep1tbrm + upg1tbrm + rep6tbrm + upg6tbrm;
// display the total (next to the products)
$('#total').html('$' + total);
// calculate the order total
var order_total = total + shipping;
// display the product total
$('#product_total').html('$' + total.toFixed(2) + '');
// display the order total
$('#order_total').html('<h4>$' + order_total.toFixed(2) + '</h4>');
});
// add the item to the cart
$('.add-item').click(function() {
// CLONE THE FORM FIELDS
var fields = $('#fields_1').clone().attr('id','fields_2');
var inputs = fields.find('input');
//inputs.each(function(i) {
// $(this).attr('class', 'field'+i+'_2');
//});
fields.appendTo('#order_container');
// get the value of each ticked checkbox
var rep1tbdt = $('.rep1tbdt').prop('checked') ? 100 : '';
var upg1tbdt = $('.upg1tbdt').prop('checked') ? 200 : '';
var rep1tbrm = $('.rep1tbrm').prop('checked') ? 300 : '';
var upg1tbrm = $('.upg1tbrm').prop('checked') ? 400 : '';
var rep6tbrm = $('.rep6tbrm').prop('checked') ? 500 : '';
var upg6tbrm = $('.upg6tbrm').prop('checked') ? 600 : '';
// calculate the total with the product price and the checkbox price
var order_total = product_price + rep1tbdt + upg1tbdt + rep1tbrm + upg1tbrm + rep6tbrm + upg6tbrm + shipping;
// add each product to the data string
var str_rep1tbdt = '';
var str_upg1tbdt = '';
var str_rep1tbrm = '';
var str_upg1tbrm = '';
var str_rep6tbrm = '';
var str_upg6tbrm = '';
if(rep1tbdt != 0) {
var str_rep1tbdt = '&rep1tbdt';
}
if(upg1tbdt != 0) {
var str_upg1tbdt = '&upg1tbdt';
}
if(rep1tbrm != 0) {
var str_rep1tbrm = '&rep1tbrm';
}
if(upg1tbrm != 0) {
var str_upg1tbrm = '&upg1tbrm';
}
if(rep6tbrm != 0) {
var str_rep6tbrm = '&rep6tbrm';
}
if(upg6tbrm != 0) {
var str_upg6tbrm = '&upg6tbrm';
}
var data = str_rep1tbdt + str_upg1tbdt + str_rep1tbrm + str_upg1tbrm + str_rep6tbrm + upg6tbrm;
// put in the tax
$('#tax_total').html('$' + product_price * 0.06.toFixed(2));
$.ajax({
type: 'GET',
url: 'form.php',
data: '&add=true' + data,
cache: false,
success: function(data){
}
});
return false;
});
});
</script>