diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 1c1074e7..7d0e3f31 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -1301,6 +1301,7 @@ $(function() {
     });
 
     var invoiceItems = [];
+    var sc_array = [];
 
     // populate invoiceItems if editing so that we don't lose the battery
     {% if mode in ['open-edit', 'onestep-edit', 'walk-in-edit'] %}
@@ -1377,26 +1378,31 @@ $(function() {
         generateInvoice();
     });
 
-	function generateInvoice() {
-		var discount = $("#invoice-discount").val();
-		var table = $("#invoice-table tbody");
+    function generateInvoice() {
+        var discount = $("#invoice-discount").val();
+        var table = $("#invoice-table tbody");
         var stype = $("#service_type").val();
         var cvid = $("#customer-vehicle").val();
 
-		// generate invoice values
-		$.ajax({
-			method: "POST",
-			url: "{{ url('jo_gen_invoice') }}",
-			data: {
+        $.each(sc_array, function(index){
+            console.log('generateInvoice ' + this.id);
+        });
+
+        // generate invoice values
+        $.ajax({
+            method: "POST",
+            url: "{{ url('jo_gen_invoice') }}",
+            data: {
                 'stype': stype,
-				'items': invoiceItems,
-				'promo': discount,
-                'cvid': cvid
-			}
-		}).done(function(response) {
+                'items': invoiceItems,
+                'promo': discount,
+                'cvid': cvid,
+                'service_charges': sc_array,
+            }
+        }).done(function(response) {
             // mark as invoice changed
             $("#invoice-change").val(1);
-			var invoice = response.invoice;
+                var invoice = response.invoice;
 
 			// populate totals
 			$("#invoice-discount").val(invoice.discount);
@@ -1649,9 +1655,9 @@ $(function() {
         var html = '<div class="form-group m-form__group row">';
         html += '<div class="col-lg-6">';
         html += '<div class="col-lg-12 form-group-inner">';
-        html += '<select class="form-control m-input sc-select" id="source" name="source">';
+        html += '<select class="form-control m-input sc-select" name="service_charges">';
         {% for key, sc in service_charges %}
-        html += '<option value="{{ key }}" data-amount="{{ sc.getAmount }}">{{ sc.getName }}</option>';
+        html += '<option value="{{ sc.getID }}" data-amount="{{ sc.getAmount }}">{{ sc.getName }}</option>';
         {% endfor %}
         html += '</select>';
         html += '</div>';
@@ -1666,6 +1672,9 @@ $(function() {
 
         $('#sc-section').append(html);
 
+        // clear the sc_array
+        sc_array.length = 0;
+
         // trigger change in select
         $('#sc-section').find('.sc-select').last().change();
         return false;
@@ -1682,7 +1691,22 @@ $(function() {
     $('body').on('change', '.sc-select', function(e) {
         var amount = $(this).children('option:selected').data('amount');
         $(this).closest('.row').find('.sc-amount').val(amount);
+
+        // clear the sc_array
+        sc_array.length = 0;
+
+        // get the service charges
+        $('.sc-select').each(function() {
+            var id = $(this).children('option:selected').val();
+            sc_array.push({
+                id: id,
+            });
+
+        });
+
+        generateInvoice();
     });
+
 });
 </script>
 {% endblock %}