Bootstrap динамические опции множественного выбора, основанные на первом множественном выборе

Question

Я хочу показать параметры динамического выбора в многосекторном поле начальной загрузки.Я могу добавить параметры во 2-м поле множественного выбора, но эти параметры не отображаются на внешнем интерфейсе.

HTML-код (из шаблона лезвия Laravel):

<div class="col-md-3 mb-
   <?php $subjects=DB::select("select * from subjects");?>
   <select name="subjects[]" multiple="multiple" id="tags" class="selectpicker">
   @foreach($subjects as $subject)
          <option value="{{$subject->id}}" >{{$subject->subject}}</option>
   @endforeach
   </select>
</div> 
<div class="col-md-3 mb-3">
    <select name="chapters[]" multiple="multiple" id="tags" class="selectpicker">
         <option value="0" >All</option>
     </select>
</div>

Код JQuery:

<script>
 $(document).ready(function() {
    $('select[name="subjects[]"]').on('change', function(){
        var subjectID = $(this).val();
        if(subjectID) {
            var HomeURL="<?php echo url('/'); ?>";
            $.ajax({
                url: HomeURL+'/create-test/getChapters/'+subjectID,
                type:"GET",
                dataType:"json",
                beforeSend: function(){
                    $('#loader').css("visibility", "visible");
                },
                success:function(data) {
                    $('select[name="chapters[]"]').empty();
                    $.each(data, function(key, value){
                    $('select[name="chapters[]"]').append('<option value="'+ key +'">' + value + '</option>').multiselect('rebuild');
                    });
                },
            });
        } else {
            $('select[name="chapters[]"]').empty();
        }
    });
});
</script>

вот различные версии кода, которые я пробовал с

01

   $.each(data, function(key, value){
   $('select[name="chapters[]"]').append('<option value="'+ key +'">' + value + '</option>').multiselect('rebuild');
                    });

02

   $.each(data, function(key, value){
   $('select[name="chapters[]"]').append('<option value="'+ key +'">' + value + '</option>').multiselect('refresh');
                    });

03

   $.each(data, function(key, value){
   $('select[name="chapters[]"]').append('<option value="'+ key +'">' + value + '</option>');
                    });
   $('select[name="chapters[]"]').multiselect('rebuild')

04

   $.each(data, function(key, value){
   $('select[name="chapters[]"]').append('<option value="'+ key +'">' + value + '</option>');
                    });
   $('select[name="chapters[]"]').multiselect('refresh')

multiselect('rebuild')

должно работать нормально, но я не знаю, почему это не работает.Рабочие примеры восстановления и обновления можно увидеть здесь.http://davidstutz.de/bootstrap-multiselect/#methods

Когда мы выбираем объекты из первого мультиселектора, он добавляет имя главы в качестве опции для второго мультиселектора (главы), но эти опции не отображаются на входных параметрах второго мультиселектора, которые должны измениться, когдамы выбираем любой вариант из первого мульти-выбора.Ссылка на страницу в реальном времени (для тестирования в реальном времени): https://preparehow.com/entry-test-preparation/create-test PS: я не получаю никакой ошибки в консоли.