<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 ----------> <div class="container"> <!-- panel preview --> <div class="col-sm-5"> <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#filter-panel">Filter opties</button> <div id="filter-panel" class="collapse filter-panel"> <div class="panel panel-default"> <div class="panel-body form-horizontal payment-form"> <div class="form-group"> <label for="land" class="col-sm-3 control-label">Land:</label> <div class="col-sm-9"> <input placeholder="zoek een land" type="text" class="form-control" id="concept" name="concept"> </div> </div> <div class="form-group"> <label for="status" class="col-sm-3 control-label">Status:</label> <div class="col-sm-9"> <select class="form-control" id="status" name="status"> <option>maak een keuze</option> <option>Implementation</option> <option>Pipeline</option> <option>3</option> </select> </div> </div> <div class="form-group"> <label for="jaar" class="col-sm-3 control-label">Jaar:</label> <div class="col-sm-9"> <input placeholder="type jaartal" type="number" class="form-control" id="amount" name="amount"> </div> </div> <div class="form-group"> <label for="sector" class="col-sm-3 control-label">Sector:</label> <div class="col-sm-9"> <select class="form-control" id="status" name="status"> <option>maak een keuze</option> <option>1</option> <option>2</option> <option>3</option> <option>Energy</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-12 text-right"> <button type="button" class="btn btn-default preview-add-button"> Verfijn </button> </div> </div> </div> </div> </div> </div> <!-- / panel preview --> </div>

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["concept"] = $('.payment-form input[name="concept"]').val(); form_data["description"] = $('.payment-form input[name="description"]').val(); form_data["amount"] = parseFloat($('.payment-form input[name="amount"]').val()).toFixed(2); form_data["status"] = $('.payment-form #status option:selected').text(); 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(); }); });