No Icon (input field only) approach breaks when inside input-group

[Xymanek]

            <div class="input-group">
                <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5"/>

                <div class="input-group-append">
                    <button class="btn btn-outline-danger">Clear</button>
                </div>
            </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker5').datetimepicker();
        });
    </script>

This doesn't work and causes following messages in browser console: https://gist.github.com/Xymanek/7517ba05bf66ce6d8f1fdc1b3a441aff

Any ideas/tips would be welcome. Thank you in advance

[Xymanek]

🤔

It works in jsfiddle: https://jsfiddle.net/3do7nL25/ Any idea what could cause it to break in my project? My JS:

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/umd/popper.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="~/Scripts/ckeditor/ckeditor.js"></script>

(Note that it works perfectly outside input-group)