How can I add an extra list function to this knockout javascript on Sharepoint?

So I have never really used Knockout before so I'm very new to this.

The pre-existing knockout means that when a certain value is clicked on a dropdown a certain list of values become available to select in the next dropdown. I'm now adding a second value to the first list which changes the values in the second dropdown. These dropdown values are all imported from 2 different sharepoint lists.

$.when(
        $.getJSON('../_vti_bin/http://ift.tt/1JTvCgS'),
        $.getJSON('../_vti_bin/http://ift.tt/1HqwNq9') 

    ).then(function(apps, roles){
        // both ajax calls are finished now
        var rolesMap = {}; // {AppID1: [role1, role2], AppID2: [role3, role4]}
        if (roles[0].d && roles[0].d.results) {
            var r = roles[0].d.results;
            for (var i = 0; i < r.length; i++) {
                if (!rolesMap[r[i].ApplicationID]) {
                    rolesMap[r[i].ApplicationID] = [];
                }
                rolesMap[r[i].ApplicationID].push(r[i]);
            }
        }
        if (apps[0].d && apps[0].d.results) {
            var a = apps[0].d.results;
            for (var i = 0; i < a.length; i++) {
                var app = {
                    ApplicationID: a[i].Id,
                    ApplicationName: a[i].ApplicationName,
                    ApplicationDescription: a[i].ApplicationDescription,
                    roles: rolesMap[a[i].Id]
                };
                model.applications.push(app);
                model.applicationMap[app.ApplicationID] = app;
            }
        }


        else if(apps[1].d && apps[0].d.results) {
            var a = apps[0].d.results;
            for (var i = 0; i < a.length; i++) {
                var app = {
                    ApplicationID: a[i].Id,
                    ApplicationName: a[i].ApplicationName,
                    ApplicationDescription: a[i].ApplicationDescription,
                    roles: rolesMap[a[i].Id]
                };
                model.applications.push(app);
                model.applicationMap[app.ApplicationID] = app;
            }
        }


    });

ASPX:

<td class="ms-vb">
            Application: 
            <select data-bind="value: $data.selectedApp, options: $parent.applications, optionsText: 'ApplicationName', optionsCaption: 'Choose an Application'" style="width: 32px" name="Application list" id="dataBox">
            </select>
            <img src="../SiteAssets/helpbutton.png" class="helpbutton" onmouseover="displayAppHelpText(this);"/>
            &nbsp; Role: <select data-bind="value: selectedRole, options: roles, optionsText: 'RoleNameValue', optionsCaption: 'Choose a Role'"></select>
            <button data-bind="click: addSelectedRole" id="add_button">Add</button> 
            <img src="../SiteAssets/helpbutton.png" class="helpbutton" onmouseover="displayRoleHelpText(this);"/>

            <span class="hidden">
                <select class="appnames" data-bind="value: $data.selectedApp, options: $parent.applications, optionsText: 'ApplicationName', optionsCaption: 'App'"></select>
                <select class="appdescriptions" data-bind="value: $data.selectedApp, options: $parent.applications, optionsText: 'ApplicationDescription', optionsCaption: ''"></select>
                <select class="rolenames" data-bind="value: selectedRole, options: roles, optionsText: 'RoleNameValue', optionsCaption: 'Please select an Application first'"></select>
                <select class="roledescriptions" data-bind="value: selectedRole, options: roles, optionsText: 'Description', optionsCaption: ''"></select>
            </span>

So when I click an application I want to change the roll, however I am having problems with this. Thanks