how to add a sub_total with shipping amount on calculating the shipping amount in jquery

Question

Am creating a project whereby when a user selects his shipping location based on the price,the price charges for that location automatically, shows on the browser, adds to the sub total price to accumulate to grand total and shows as grand total in the browser. I have been able to achieve the part on selecting the shipping location which shows the shipping amount for that location.

Here is my jquery code

    // show the price based on the town
         $(document).on('change','.town',function(){
           var tow_id=$(this).val();
           $.ajax({
             type:'get',
             url:'displayshippingprice',
             data:{'id':tow_id},
             dataType:'json',
             success:function(data){
                console.log(data);
                console.log(data.shipping_charges);
                $('.pickup_point').val(data.pickuppoint);
                $('.shipping_amount').html(data.shipping_charges);     
             },
             error:function(){
             }
           });
     var shippingcharges=val((parseFloat($(".shipping_amount").val())));
    var sub_total=val((parseFloat($(".sub_total").val())));
    var grand_total=parseInt(sub_total)+parseInt(shippingcharges);
     $('.grand_total').html("Ksh"+grand_total);
   });

The part where am stuck is adding the shipping amount for that user to the subtotal. How can I have a function being called after the user selects the location and the shipping price is added to the subtotal in the same function. i have tried that above but still am unable to show the grand total in the browser.