Объясните пожалуйста Ajax зависимые списки. Нигде нет конкретной информации, код что нашел не работает

Помогите, пожалуйста.

Я перелопатил огромное количество поисковиков в том числе на английском языке, нигде не нашел конкретного и понятного описания про то, как выстроить Ajax зависимые списки select везде примеры что находил писали люди которые вообще не понимают программирования и полотна кода, хотя объективно понимаю что там код в 15-20 строчек.

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

Таблица mark имеет id и title (названия марок) Таблица model имеет id, mark_id (сопоставление с марками из таблицы mark) и title (названия моделей)

В RedBean вставляю такой код, он в select выводит все марки, модели загружаться не хотят, список моделей просто пропадает, исчезает даже надпись "Выберите модель".

$marks = R::findAll('mark', 'ORDER BY title ASC');    
        $model = R::findAll('model', 'ORDER BY title ASC');

PHP.

<form class="FastSearch" id="search" action="search.php">

<h3>Марка</h3>
                <label>
                    <select id="mark" class="select2" name="mark">
                        <option value="0" selected>Все марки</option>
                        <?php if (isset($marks)): ?>
                            <?php foreach ($marks as $mark): ?>
                                <option value="<?=$mark['id']; ?>"><?=$mark['title']; ?></option>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </select>
                </label>
            </div>

            <!--Модель-->

            <div class="FullModel">
                <h3>Модель</h3>
                <label>
                    <select id="model" class="select2" name="model">
                        <option value="0" disabled selected>Выберите модель</option>
                    </select>
                </label>

</form>

JavaScript.

function getModel(parent, mark, model, create=0) {
        $(parent).on('change',mark, function () {
            var mark_id = $(mark).val();
            $.ajax({
                url: '/',
                data: {
                    mark_id: mark_id,
                    create: create,
                },

                type: 'POST',
                dataType: 'json',
                success: function (res) {
                    if (res) {
                        $(model).empty().html(res)
                    } else {
                        $(model).empty().html('<option>Нет моделей</option>')
                    }
                },
                error: function () {
                    alert('Ошибка');
                }
            });
        });
    }


    getModel('#search', '#mark', '#model');

Страница исполнения скрипта https://website.com/Index.php

Благодарю за помощь.

Код ошибки в консоли браузера.

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.min.js:4
jquery.min.js:4 Failed to load resource: the server responded with a status of 404 ()
send @ jquery.min.js:4
S:1 Uncaught SyntaxError: Unexpected token '<'
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ja (jquery.min.js:3)
VM149:24 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at <anonymous>:24:39
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
jquery.min.js:4 Failed to load resource: the server responded with a status of 404 ()
send @ jquery.min.js:4
S:1 Uncaught SyntaxError: Unexpected token '<'
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ja (jquery.min.js:3)
jquery.min.js:4 Failed to load resource: the server responded with a status of 404 ()
send @ jquery.min.js:4
S:1 Uncaught SyntaxError: Unexpected token '<'
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ja (jquery.min.js:3)
S:203 Uncaught SyntaxError: Unexpected token '}'
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ja (jquery.min.js:3)
image.jpg:1 Failed to load resource: the server responded with a status of 404 ()