first time only start and end time calculation is working

Question

I hav try to calculate the start and end time difference its i ill be working correctly on first selection. when i select again start time its i ill be not change the end time duration i ill try to solve it i hav no idea what i should hav mistak it can any 1 clear it 

 

 

<script type="text/javascript" >

$(function() {
$('#t_start_time').timepicker({
'step': 15
});
});
// temporarily disable end time
$(function() {
$("#t_end_time").prop('disabled', true);
});
// when a start time is chosen
$(function() {
$('#t_start_time').on('changeTime', function () {
// enable the end time input
$('#t_end_time').prop('disabled', false);

// enable the input as a timepicker
$('#t_end_time').timepicker({
minTime: $(this).val(),
showDuration: true,
step: 15,
className: 'endTime'
}).on("changeTime", function () {
var selectedDurationSpan = $(".ui-timepicker-wrapper.endTime").find("li.ui-timepicker-selected").find("span.ui-timepicker-duration");
var selectedDuration = selectedDurationSpan.text().trim().replace(/[()]/g, '');
$("#t_duration").val(selectedDuration);
});
});
});

</script>

 

<div class="form-group">    
 <label for="t_start_time"> start time:</label>   
  <input type="text" id="t_start_time" name="t_start_time" class="form-control ui-timepicker-input" />
 </div> <div class="form-group" id="end_time">   
  <label for="t_end_time"> end time:</label>   
  <input type="text" id="t_end_time" name="t_end_time" class="form-control ui-timepicker-duration" /> </div> <div class="form-group" id="duration">     <label for="t_duration"> duration:</label>     <input type="text" id="t_duration" name="t_duration" class="form-control ui-timepicker-duration" disabled="true" /> </div>