Can't get the value of jquery datetimepicker on change

Hello, Am using Jquery datatimepicker from getdatepicker.com and I want to get the new date on change

this is my Jquery code

<script>
    function changePrice() {
        var break_price = $("#break_price").val();
        var start = $('#log_time').val();
        var end = $('#exit_time').val();
        var log_time = new Date(start);
        var exit_time = new Date(end);
        var time_difference = exit_time.getTime() - log_time.getTime();
        var result = time_difference / (1000 * 60 * 60 * 24);
        $('input[name=price]').val(break_price*result);
    }
    $('#log_time').on('change', function() {
        changePrice();
    });
    $('#exit_time').on('change', function() {
        changePrice();
    });
</script> 

when I change the date nothing happens the on change not working for me

 <div class="form-group col-md-6">
                                    <label for="log_time">@lang('site.log_time')</label>
                                        <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input  @error('log_time') is-invalid @enderror"
                                                data-target="#reservationdate" name="log_time" id="log_time"
                                                value="{{$book->log_time}}" id="log_time"  required/>
                                            <div class="input-group-append" data-target="#reservationdate"
                                                data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="exit_time">@lang('site.exit_time')</label>
                                        <div class="input-group date" id="reservationdate1" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input  @error('exit_time') is-invalid @enderror"
                                                data-target="#reservationdate1" name="exit_time" id="exit_time"
                                                 value="{{$book->exit_time}}" onchange=(changePrice())  required/>
                                            <div class="input-group-append" data-target="#reservationdate1"
                                                data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                </div>