Unable to append obtain values to a multi-select dropdown

I have a list named “TMKRoles” that contains the roles as title. I have another list named “TMKEnvironment” that has the title as environments and a lookup columns from roles. Basically, I have assigned different roles to the environments and I have created a page with Roles and Environment having multi-select dropdowns. When I select multiple roles from the roles dropdown, the environments corresponding to those roles should be shown up in the Environment dropdown for selection. In the following code, the variable “Environment” is fetching me the corresponding environment names but I’m unable to append them to the environment multi-select dropdown.

    <div id="DACasesSearchMain">        <table class="searchBody">             <tbody >                 <tr>                     <td id="TMKRoles"class="lblHeadings">TMK Roles:</td>                     <td class="tdInputs">                         <select id="tmkRoles" class="selectpicker" multiple  data-live-search="true" >                         </select>                     </td>                     <td style="width: auto;"></td>                 </tr>                 <tr>                     <td class="lblHeadings">TMK Environment:</td>                     <td class="tdInputs1" id=""TMKEnvironment>                         <select id="tmkEnvironment" class="selectpicker"  multiple data-live-search="true" >                         </select>                     </td>                     <td style="width: auto;"></td>                 </tr>                 </tbody>          </table>         </div>    <script type="text/javascript" src="/jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="/bootstrap.min.css" /> <link rel="stylesheet" href="/bootstrap-select.css" /> <script language="javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script> <script type="text/javascript" src="/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="/bootstrap-select.min.js"></script> <script language="javascript" >    $  .ajax({             url: "<MyRootSite>/_api/web/lists/getByTitle('TMKRoles')/items?                    $  select=Title",             headers: {             "Accept": "application/json;odata=verbose"         },         async: false,         success: function(data, request) {             var tmkRoles = $  ("#tmkRoles")             var results = data.d.results.map(function (el) {return el.Title})          for (i = 0; i < results.length; i++) {             var selectOption = results[i].toString();             tmkRoles.append("<option value='" + selectOption + "'>" +   selectOption + "</option>");         }     },     error: onLoadError }); var opt=[]; $  ('#tmkRoles').change(function() {  opt=[];  for(i=0;i<$  ('#tmkRoles').val().length;i++) {  opt[i]=$  ('#tmkRoles').val()[i]; } loadEnvironment(); }); var Env = []; function loadEnvironment(){ $  .ajax({             url: "<MyRootSite>/_api/web/lists/getByTitle('TMKEnvironment')/items?$  select=Title,Roles/Title&$  expand=Roles/Title",     headers: {         "Accept": "application/json;odata=verbose"     },     async: false,     success: function(data, request) {         var tmkEnvironment = $  ("#tmkEnvironment")         var results1=[];                     results1 = data.d.results;                     var RolesTitle=[];                      Env=[];          for(j=0;j<results1.length;j++){                RolesTitle.push(results1[j]["Roles"]["Title"]);                Env.push(results1[j]["Title"]);         } var Environment=[]; console.log(RolesTitle); console.log(Env); for(j=0;j<Env.length;j++){  for(i=0;i<$  ('#tmkRoles').val().length;i++) {  console.log(opt[i] == RolesTitle[j]);  if(opt[i] == RolesTitle[j])  {     Environment.push(Env[j]);  } } } console.log(Environment); for(k=0;k<Environment.length;k++) {  var selectOption2=Environment[k].toString();  console.log(selectOption2);  $  ("#tmkEnvironment").append("<option value='" + selectOption2 + "'>" +      selectOption2 + "</option>"); }     },     error: onLoadError         }); }     function onLoadError() {            }   $  ('select').selectpicker();  </script> 

This is the form page that contains the multi-select dropdowns This is the Roles list This is the Environment list