first time only start and end time calculation is working

See more:

jQuery

more than a day 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" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script type="text/javascript" src="jquery.timepicker.js"></script>
  <link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />

<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>