.val () fields not updating

I am puzzled as to why my second variable below is not updating after first selecting a value:

function setPrimeLimits() {
    var selectedStart = $('#space_global_start').val();
    var selectedEnd = $('#space_global_end').val();
    $('#prime_global_start, #prime_global_end').timepicker({
        minTime: selectedStart,
        maxTime: selectedEnd,
    });
}

$('#space_global_start, #space_global_end').on('changeTime', setPrimeLimits);

      

        
        
        
      

    

selectedStart

and selectedEnd

are both time and for the first time when they are selected, the function works perfectly to limit the other two timers ( #prime_global_start

and #prime_global_end

), but on the second and subsequent updating of the field (they are drop-down lists), the variables are no longer updated.

I usually try to delegate to an event, but it looks like I'm already doing this, so I'm not sure where I went wrong.

This is all wrapped in the document.ready function.

HTML code:

The "Timepicker" fields from which I get the vars:

<input type="text" name="space_global_start" id="space_global_start" class="spaceTimePickerStart" value="<?php echo (null !== get_space_meta( 'space_global_start' )) ? get_space_meta( 'space_global_start' ) : '' ?>" />
<input type="text" name="space_global_end" id="space_global_end" class="spaceTimePickerEnd" value="<?php echo (null !== get_space_meta( 'space_global_end' )) ? get_space_meta( 'space_global_end' ) : '' ?>"/>

      

        
        
        
      

    

The "Timepicker" fields I am trying to constrain are:

<input type="text" name="prime_global_start" id="prime_global_start" class="primeTimePickerStart" value="<?php echo (null !== get_space_meta( 'prime_global_start' )) ? get_space_meta( 'prime_global_start' ) : '' ?>" />
<input type="text" name="prime_global_end" id="prime_global_end" class="primeTimePickerEnd" value="<?php echo (null !== get_space_meta( 'prime_global_end' )) ? get_space_meta( 'prime_global_end' ) : '' ?>"/>