diff --git a/src/Service/JobOrderHandler/CMBJobOrderHandler.php b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
index cfdab814..a7712042 100644
--- a/src/Service/JobOrderHandler/CMBJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
@@ -26,6 +26,7 @@ use App\Entity\Rider;
 use App\Entity\JORejection;
 use App\Entity\Warranty;
 use App\Entity\Customer;
+use App\Entity\ServiceCharge;
 
 use App\Ramcar\InvoiceCriteria;
 use App\Ramcar\CMBServiceType;
@@ -2674,6 +2675,7 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
         // db loaded
         $params['bmfgs'] = $em->getRepository(BatteryManufacturer::class)->findAll();
         $params['promos'] = $em->getRepository(Promo::class)->findAll();
+        $params['service_charges'] = $em->getRepository(ServiceCharge::class)->findAll();
 
         // list of hubs
         $hubs = $em->getRepository(Hub::class)->findBy([], ['name' => 'ASC']);
diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 08d20ee3..6662facf 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -489,24 +489,26 @@
                                         <button class="btn btn-primary" id="btn-sc-add">Add Service Charge</button>
                                     </div>
                                 </div>
+                                <!-- TODO: loop through existing service charges for job order -->
+                                <!--
                                 <div class="form-group m-form__group row">
                                     <div class="col-lg-6">
                                         <div class="col-lg-12 form-group-inner">
-                                            <select class="form-control m-input" name="service_charges[]">
-                                                {% for key, class in sources %}
-                                                    <option value="{{ key }}"{{ obj.getSource == key ? ' selected' }}>{{ class }}</option>
+                                            <select class="form-control m-input sc-select" name="service_charges[]">
+                                                {% for key, sc in service_charges %}
+                                                    <option value="{{ key }} "obj.getSource == key ? ' selected' }}>{{ sc.getName }}</option>
                                                 {% endfor %}
                                             </select>
-                                            <div class="form-control-feedback hide" data-field="mode_of_payment"></div>
                                         </div>
                                     </div>
                                     <div class="col-lg-5">
-                                        <input class="form-control" type="text" value="0" disabled>
+                                        <input class="form-control sc-amount" type="text" value="0" disabled>
                                     </div>
                                     <div class="col-lg-1">
                                         <button class="btn btn-danger btn-sc-remove">X</button>
                                     </div>
                                 </div>
+                                -->
                             </div>
 
                             <div class="m-form__seperator m-form__seperator--dashed"></div>
@@ -1647,16 +1649,15 @@ $(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" id="source" name="source">';
-        {% for key, class in sources %}
-        html += '<option value="{{ key }}"{{ obj.getSource == key ? ' selected' }}>{{ class }}</option>';
+        html += '<select class="form-control m-input sc-select" id="source" name="source">';
+        {% for key, sc in service_charges %}
+        html += '<option value="{{ key }}" data-amount="{{ sc.getAmount }}">{{ sc.getName }}</option>';
         {% endfor %}
         html += '</select>';
-        html += '<div class="form-control-feedback hide" data-field="mode_of_payment"></div>';
         html += '</div>';
         html += '</div>';
         html += '<div class="col-lg-5">';
-        html += '<input class="form-control" type="text" value="0" disabled>';
+        html += '<input class="form-control sc-amount" type="text" value="0" disabled>';
         html += '</div>';
         html += '<div class="col-lg-1">';
         html += '<button class="btn btn-danger btn-sc-remove">X</button>';
@@ -1664,6 +1665,9 @@ $(function() {
         html += '</div>';
 
         $('#sc-section').append(html);
+
+        // trigger change in select
+        $('#sc-section').find('.sc-select').last().change();
         return false;
     });
 
@@ -1674,6 +1678,11 @@ $(function() {
         $(this).closest('.row').remove();
         return false;
     });
+
+    $('body').on('change', '.sc-select', function(e) {
+        var amount = $(this).children('option:selected').data('amount');
+        $(this).closest('.row').find('.sc-amount').val(amount);
+    });
 });
 </script>
 {% endblock %}