javascript - Fill listbox with data loaded from PHP via AJAX

My goal is to show a modal div loaded when a button that contains the user id is pressed with two listboxes, one with avaible usergroups and another with the groups the user currently is into.

At this moment the data is being successfully.

Developer tools log:

[{id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"},??�]
0: {id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"}
1: {id: 1, name: "Admin", idgrupo: 2, nome: "Cliente"}

But the data isn't beeing displayed on the modal div without any error code.

Here's the code:

##Controller:

public function getGroups($id)
{

  $data = \DB::table('grupoutilizador')
  -> join ('users', function ($join) use ($id){
    $join->on('users.id', '=', 'grupoutilizador.iduser')
    ->where('users.id', "=", $id );
  }) -> join ('grupo', 'grupo.idgrupo', "=", 'grupoutilizador.idgrupo') ->
  select('users.id', 'users.name', 'grupo.idgrupo', 'grupo.nome')
  -> get();



  return response()->json($data, 200);
}

##JavaScript:

function saveGroup(type,id){
  $('#useridgr').attr('placeholder', '').val('');
  $("#usernamegr").attr('placeholder', 'Nome').val('');
  $('#list_box').html('');
  $('#list_box_ini').html('');
  
  if (type == 1){
    
    
  } else {
    loadatagroup(id);
  }
  
}
var loadatagroup = (uid) => {
  
  $.ajax({
    type: 'GET',
    url: 'usergrupo/' + uid,
    data: {'_token': $("input[name='_token']").val()},
    success: function(data){
      
      $('#useridgr').attr('placeholder',data.id).val(data.id);
      $("#usernamegr").attr('placeholder',data.name).val(data.name);
       
      <?php
      
      $gruposini = mysqli_query($conn2,'SELECT *, 0 AS INUSE FROM grupo');
      
      while($row = mysqli_fetch_array($gruposini)) {
        
        $stringoption =  "$(\"#list_box_ini\").append(\"<option value='".$row['idgrupo']."'>".$row['nome']."</option>\");";
        
      }
      
      ?>
      
      for (i=0; i<data.lenght; i++){
        
        var id = response[i]['idgrupo'];
        var name = response[i]['nome'];
        
        $("#list_box").append("<option value='"+id+"'>"+name+"</option>");
      }
      
      
      
    }
    
  })
  
}

##HTML:

  <div class="card-body">
    
    
    <div class="form-group bmd-form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text"><i class="material-icons"></i></div>
        </div>
        <input name = 'id' type="text" class="form-control" placeholder="" id='useridgr' disabled hidden>
      </div>
    </div>
    
    
    <div class="form-group bmd-form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text"><i class="material-icons">face</i></div>
        </div>
        <input name = 'name' type="text" class="form-control" placeholder="" id='usernamegr' disabled>
      </div>
    </div>
    
    <select  id = "list_box_ini" name="list_box_ini"  multiple="multiple"> </select>
    
    
    <select  id = "list_box" name="list_box"  multiple="multiple"> </select>
    
  </form>
</div>

How I could make the data appear?

Solution:

I've arleady figured out how to solve this, now I need to get my code clenar and optimize it.

The working code is here: https://codereview.stackexchange.com/questions/248194/how-to-get-my-js-code-cleaner