Как создать динамический выпадающий список, основанный на предыдущем выборе в модале?

Question

У меня есть список с плавающим IP, который я хочу назначить для настройки, для этого я создал список FIP как semantic-ui-modals.В этом модале у меня есть два выпадающих списка, для выбора проекта, в котором присутствует установка, а другой - раскрывающийся список настроек.раскрывающийся список настроек должен отображать только те настройки, которые не были назначены никаким fip.Таким образом, первое раскрывающееся меню может помочь в фильтрации результатов второго раскрывающегося списка на основе идентификатора fipID и projectID.

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

fipManager.html

                    <div class="card">
                            <div class="content">
                                <div class="header">Floating ID: {{fid}}</div>
                                <div class="description" style="white-space:pre-wrap;">
                                    {{fip}}
                                </div>
                            </div>
                            <div class="ui bottom attached assignFIP button">
                                <i class="add icon"></i>
                                Assign FIP
                            </div>
                        </div>
                        <div class="ui mini fip{{fid}} modal">
                            <i class="close icon"></i>
                            <div class="header">
                                Floating ID: {{fid}}
                            </div>
                            <div class="content">
                                <div class="ui selection fluid fipProject dropdown" id="fipProject{{fid}}"
                                     style="width:80%;margin: 1em auto;">
                                    <input type="hidden" name="fipProject">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">Select Project</div>
                                    <div class="menu">
                                        {{#each getProjectDetails}}
                                            <div class="fipProjectBtn item" data-value={{project}}>{{project}}</div>
                                        {{/each}}
                                    </div>
                                </div>
                                <div class="ui selection fluid setup dropdown" id="setup{{fid}}" style="width:80%;margin: 1em auto;">
                                    <input type="hidden" name="setup">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">Select Setup</div>
                                    <div class="menu">
                                        {{#each getSetupDetails fid}}
                                            <div class="fipSetupBtn item" data-value={{setupID}}>{{setupID}}</div>
                                        {{/each}}
                                    </div>
                                </div>
                            </div>
                            <div class="actions">
                                <div class="ui red cancel button" style="float: left">Cancel</div>
                                <div class="ui green approve button">Assign</div>
                            </div>
                        </div>

fipManager.js
События:

'click .assignFIP': function () {
        fipID = this.fid;
        $('.fip' + this.fid).modal({
            closable: true,
            onDeny: function () {
                return true;
            },
            onShow: function () {
                $('#fipProject' + fipID).dropdown({
                    on: 'hover',
                    showOnFocus: false,
                    transition: 'slide down',
                    onChange: function (value) {
                        console.log(value);
                        Session.set('fipProject', value);
                        var setupList = Meteor.call('getSetupList', value, fipID, function (err, dropdown) {
                            if (err) {
                                console.log(err);
                            }
                            else {
                                console.log(dropdown);
                                $('#setup' + fipID).empty();
                                createDropDown(dropdown, "setupDropdownList" + fipID);
                            }
                        });
                    }
                });
                $('#setup' + fipID).dropdown({
                    on: 'hover',
                    showOnFocus: false,
                    transition: 'slide down',
                    onChange: function (value) {
                        console.log(value);
                    }
                });
            },
            onApprove: function () {
                var setupID = 1;
                var projectName = "NODE30.v7986";
                var fipID = 1;
                swal(
                    'Assigned!',
                    'The FID:' + fipID + ' is now assigned to ' + setupID + ' setup in ' + projectName + ' project',
                    'success'
                )
            }
        }).modal('setting', 'transition', 'scale').modal('show');
    },

function createDropDown(dropdown, id) {
    console.log(id);
    console.log(dropdown);
    $(document).ready(function () {
        output = document.getElementById(id);
        df = document.createDocumentFragment();
        for (var i in dropdown) {
            var ele = document.createElement("div");
            ele.setAttribute("class", "item");
            ele.setAttribute("title", dropdown[i]);
            ele.innerHTML = dropdown[i];
            df.appendChild(ele);
        }
        output.appendChild(df);
    });
}

server / main.js

'getSetupList': function (projectName, fipID) {
        var allocatedFIPList = associateFIP.find({project: projectName}).fetch();
        var clusterList = cluster.find({project: projectName}).fetch();
        var freeSetup = [];
        if (clusterList.length !== 0) {
            for (var i = 0; i < clusterList.length; i++) {
                var isMatch = false;
                if (allocatedFIPList.length !== 0) {
                    for (var j = 0; j < allocatedFIPList.length; j++) {
                        if (clusterList[i].setupID === allocatedFIPList[i].setupID && isMatch === false)
                            continue;
                        else isMatch = true;
                    }
                }
                if (!isMatch)
                    freeSetup.push(clusterList[i]);
            }
        }
        console.log(freeSetup);
        return freeSetup;
    },

Есть ли что-то, чего мне не хватает, пожалуйста, дайте мне знать.