<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="order"> <div class="divider" id="section1"> <div class="container"> <!-- Headings --> <div class="row"> <h1>Order Form</h1> </div> <!-- panel preview --> <div class="row"> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-body form-horizontal payment-form"> <h3>Customer Info</h3> <div class="cform" id="contact-form"> <form action="order.php" method="post" role="form" class="contactForm"> <div class="form-group"> <label for="store" class="col-sm-5 control-label">Store#</label> <div class="col-sm-7"> <input type="number" class="form-control" id="store" name="store"> </div> </div> <div class="form-group"> <label for="phone" class="col-sm-5 control-label">Phone#</label> <div class="col-sm-7"> <input type="tel" class="form-control" id="phone" name="phone"> </div> </div> <div class="form-group"> <label for="date" class="col-sm-5 control-label">Delivery Date</label> <div class="col-sm-7"> <input type="date" class="form-control" id="date" name="date"> </div> </div> <div class="panel-body form-horizontal payment-form"> <h3>Fuel Order</h3> <div class="form-group"> <label for="unleaded" class="col-sm-5 control-label">Unleaded</label> <div class="col-sm-7"> <input type="number" class="form-control" id="unleaded" name="unleaded"> </div> </div> <div class="form-group"> <label for="mid" class="col-sm-5 control-label">Mid-Grade</label> <div class="col-sm-7"> <input type="number" class="form-control" id="mid" name="mid"> </div> </div> <div class="form-group"> <label for="premium" class="col-sm-5 control-label">Premium</label> <div class="col-sm-7"> <input type="number" class="form-control" id="premium" name="premium"> </div> </div> <div class="form-group"> <label for="hwy" class="col-sm-5 control-label">Hwy Diesel</label> <div class="col-sm-7"> <input type="number" class="form-control" id="hwy" name="hwy"> </div> </div> <div class="form-group"> <label for="dyed" class="col-sm-5 control-label">Dyed Diesel</label> <div class="col-sm-7"> <input type="number" class="form-control" id="dyed" name="dyed"> </div> </div> <div class="form-group"> <label for="rec" class="col-sm-5 control-label">Rec 90</label> <div class="col-sm-7"> <input type="number" class="form-control" id="rec" name="rec"> </div> </div> <div class="form-group"> <label for="ker" class="col-sm-5 control-label">Kerosen</label> <div class="col-sm-7"> <input type="number" class="form-control" id="ker" name="ker"> </div> </div> </div> </form> </div> <div class="form-group"> <div class="col-sm-12 text-right"> <button type="button" class="btn btn-default preview-add-button"> <span class="glyphicon glyphicon-plus"></span> Add </button> </div> </div> </div> </div> </div> <!-- / panel preview --> <div class="col-sm-7"> <h4>Fuel Order Preview:</h4> <div class="row"> <div class="col-xs-12"> <div class="table-responsive"> <table class="table preview-table"> <thead> <tr> <th>Unleaded</th> <th>Mid-Grade</th> <th>Premium</th> <th>Hwy Diesel</th> <th>Dyed Diesel</th> <th>Rec 90</th> <th>Kerosen</th> </tr> </thead> <tbody></tbody> <!-- preview content goes here--> </table> </div> </div> </div> <div class="row text-right"> <div class="col-xs-12"> <h4>Total: <strong><span class="preview-total"></span></strong></h4> </div> </div> <div class="row"> <div class="col-xs-12"> <hr style="border:1px dashed #dddddd;"> <button type="submit" class="btn btn-primary btn-block">Submit all and finish</button> </div> </div> </div> </section>

function calc_total(){ var sum = 0; $('.input-amount').each(function(){ sum += parseFloat($(this).text()); }); $(".preview-total").text(sum); } $(document).on('click', '.input-remove-row', function(){ var tr = $(this).closest('tr'); tr.fadeOut(200, function(){ tr.remove(); calc_total() }); }); $(function(){ $('.preview-add-button').click(function(){ var form_data = {}; form_data["unleaded"] = $('.payment-form input[name="unleaded"]').val(); form_data["mid"] = $('.payment-form input[name="mid"]').val(); form_data["premium"] = $('.payment-form input[name="premium"]').val(); form_data["hwy"] = $('.payment-form input[name="hwy"]').val(); form_data["dyed"] = $('.payment-form input[name="dyed"]').val(); form_data["rec"] = $('.payment-form input[name="rec"]').val(); form_data["ker"] = $('.payment-form input[name="ker"]').val(); form_data["date"] = $('.payment-form input[name="date"]').val(); form_data["remove-row"] = '<span class="glyphicon glyphicon-remove"></span>'; var row = $('<tr></tr>'); $.each(form_data, function( type, value ) { $('<td class="input-'+type+'"></td>').html(value).appendTo(row); }); $('.preview-table > tbody:last').append(row); calc_total(); }); });