jquery blitzer theme timepicker and bootstrap 4

I need some help with jquery blitzer theme timepicker working with bootstrap 4. I think it is conflicting with the bootrap javascript files. Below is the coding I have currently

<link rel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/blitzer/jquery-ui.css"/>
                <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

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

<script>
$(document).ready(function() {
                  $('#exrtime').timepicker({
                    defaultTime: '12:00',
                      showLeadingZero: true,
                    showNowButton: true,
                      showCloseButton: true,
                      showDeselectButton: true,
                      showOn: 'both',
                  });
              
                $('#exstime').timepicker({
                    defaultTime: '12:00',
                      showLeadingZero: true,
                    showNowButton: true,
                      showCloseButton: true,
                      showDeselectButton: true,
                      showOn: 'both',
                  });
});
</script>

<div class="form-group row">
                    <label class="col-lg-4 col-form-label">Expected Start Time</label>
                    <div class="col-lg-6">
                    <input type="text" class="form-control" name="exstime" value="<?php echo $exstime; ?>" id="exstime"/>
                    </div>
                    </div>

<div class="form-group row">
                    <label class="col-lg-4 col-form-label">Expected Repair Time</label>
                    <div class="col-lg-6">
                    <input type="text" class="form-control" name="exrtime" value="<?php echo $exrtime; ?>" id="exrtime"/>
                    </div>
                    </div>

<!-- footer -->
            <footer class="footer"> &copy; <?php echo date("Y"); ?> IT Done Right. All Rights Reserved.</footer>
            <!-- End footer -->
        </div>
        <!-- End Page wrapper  -->
    </div>
    <!-- End Wrapper -->
    <!-- All Jquery -->  
    <script src="https://www.it-doneright.co.uk/admin/js/lib/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="https://www.it-doneright.co.uk/admin/js/lib/bootstrap/js/popper.min.js"></script>
    <script src="https://www.it-doneright.co.uk/admin/js/lib/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="https://www.it-doneright.co.uk/admin/js/jquery.slimscroll.js"></script>
    <!--Menu sidebar -->
    <script src="https://www.it-doneright.co.uk/admin/js/sidebarmenu.js"></script>
    <!--stickey kit -->
    <script src="https://www.it-doneright.co.uk/admin/js/lib/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <!--Custom JavaScript -->
    <script src="https://www.it-doneright.co.uk/admin/js/scripts.js"></script>
  
    <script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>

</body>

</html>

PHP:

Can anyone help please, thank you in advance