Используя семантический пользовательский интерфейс, вы хотите создать динамическое раскрывающееся меню

Возникла проблема с раскрывающимся списком семантического пользовательского интерфейса. Я использовал Semantic-Ui и хотел динамически изменить раскрывающийся список. То есть, когда я выбираю значение из первого раскрывающегося списка, создается второй элемент раскрывающегося списка, но когда я выбираю значение из второго раскрывающегося списка, третий раскрывающийся список и его элемент не генерируются.

<script src = "https://code.jquery.com/jquery-3.1.1.min.js" crossorigin = "anonymous"></script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

<div class = "ui selection dropdown select">
    <input type = "hidden" name = "programmetype">
    <div class = "text">First dropdown</div>
    <i class = "dropdown icon"></i>
    <div class = "menu">
        <div class = "item" data-value = "val1">Car</div>
        <div class = "item" data-value = "val2">Tank</div>
        <div class = "item" data-value = "val3">Plane</div>
    </div>
</div>

<div id = "servicetype"></div>
<script>
$(".select").dropdown({
    onChange: function() {
        $('.select').remove();
        $('#servicetype').addClass('ui selection dropdown select-language');

        $('#servicetype').html(
            '<input type = "hidden" name = "servicetype">'
            +'<div class = "text">Second dropdown</div>'
            +'<i class = "dropdown icon "></i>'
            +'<div class = "menu">'
            +'<div class = "item" data-value = "acp">ACP</div>'
            +'<div class = "item" data-value = "art"> ART</div>'
            +'</div>'
            +'</div>'
        );
        $('#servicetype').dropdown();
        $(".select-language").dropdown({
            onChange: function() {
                $('.select-language').remove();
                $('#servicetype').addClass('ui selection dropdownselect');

                $('#servicetype').html(
                    '<input type = "hidden" name = "servicetype">'
                    +'<div class = "text">Third dropdown</div>'
                    +'<i class = "dropdown icon "></i>'
                    +'<div class = "menu">'
                    +'<div class = "item" data-value = "acp">AC</div>'
                    +'<div class = "item" data-value = "art"> AR</div>'
                    +'</div>'
                    +'</div>'
                );
                $('#servicetype').dropdown();
            }
        });
    }
});
</script>