使用AJAX在CakePHP 3.8.0中依赖（链接）下拉列表

I'm new to CakePHP and ajax. I'm trying to figure out how to utilize AJAX to make dependent (chained) dropdown in CakePHP 3.8.0.

I'm making a few tables for example to learn how to build the chained dropdown menu. I have three tables models, chapters, userinputs. In the Userinputs table, I would to chapter to load based on model. Right now all models and all chapters are shown. This is how they're all connected. how all three tables are connected

I've been looking at some examples online and tried to apply them into my code but nothing seems to be working. This is my add.ctp of my Userinputs table.

<div class="userinputs form large-9 medium-8 columns content">
<?= $this->Form->create($userinput, ['type' => 'file', 'class' => 'ajax_page']) ?>
<fieldset>
    <legend><?= __('Add Userinput') ?><div class="ajax_loading_image"></legend>
    <?php
        echo $this->Form->control('model_id', ['options' => $models, 'empty' => true, 'id'=>'models']);
        echo $this->Form->control('chapter_id', ['options' => $chapters, 'empty' => true, 'id'=>'chapters']);
    ?>
</fieldset>
<?= $this->Form->button(__('Submit')) ?>
<?= $this->Form->end() ?>

I also added this script at the end of add.ctp of Userinputs table

<script>
    $("#models").on('change',function() {
        var id = $(this).val();

        $("#chapters").find('option').remove();
        if (id) {
            var dataString = 'id='+ id;
            $.ajax({
                dataType:'json',
                type: "POST",
                url: '<?php echo Router::url(array("controller" => "Userinputs", "action" => "getChapters")); ?>' ,
                data: dataString,
                cache: false,
                success: function(html) {
                    //$("#loding1").hide();
                    $.each(html, function(key, value) {              
                        //alert(key);
                        //alert(value);
                        //$('<option>').val('').text('select');
                        $('<option>').val(key).text(value).appendTo($("#chapters"));

                    });
                } 
            });
        }
    });
</script>

In the controller of my Userinputs, I added a public function

public function getChapters() 
{ 
    $id = $this->request->data('id'); 
    $chapters = $this->Chapters->find('all', [ 'conditions' => [ 'model_id' => $id ] ]); 
    echo json_encode($chapters); 
}

Please take a look at my codes and please assist me on how to get this working properly. Any help is much appreciated.