为什么单击后daterangepicker不显示？

Question

我有一个页面，您可以在其中选择名称时使用自动完成文本框搜索名称。一个Java脚本调用一个PHP脚本，该页面显示在<div>中。在页面上是一个daterangepicker，但这不起作用。当我在空白页上测试daterangepicker时，脚本在功能上正常。

有人可以帮我修复脚本吗？

Index.php

<script
  src="https://code.jquery.com/jquery-3.4.0.js"
  integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
  crossorigin="anonymous"></script>

<button id="button"> Klik hier</button>
<div id="formulier"></div>

<script>  
 $(document).ready(function(){  
      $('#button').click(function(){  
           var name_id = $(this).val();  
           $.ajax({  
                url:"embedded.php",  
                method:"POST",  
                data:{},  
                success:function(data){  
                     $('#formulier').html(data);  
                }  
           });  
      });  
 });  
 </script> 

embedded.php

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

      <script type="text/javascript" src="daterangepicker.js"></script>


<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 15%">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <i class="fa fa-caret-down"></i>
</div>

<script type="text/javascript">
$(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('D-M-YYYY') + ' - ' + end.format('D-M-YYYY'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Vandaag': [moment(), moment()],
           'Gisteren': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Afgelopen 7 dagen': [moment().subtract(6, 'days'), moment()],
           'Afgelopen 30 dagen': [moment().subtract(29, 'days'), moment()],
           'Deze maand': [moment().startOf('month'), moment().endOf('month')],
           'Vorige maand': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});
</script>