Show roles in the List Collector of the Selected Group

[21r11a1236]

Hi Team,

I have created catalog request to add roles to groups.

Now, i want to show the existing roles that are already in selected group.

Example if group service desk already has itil role, so it should show the itil role in right side of the slushbucket 

Kindly help

i already wrote the clientscript and script include:

clientscript:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) {
        return;
    }

    g_form.clearValue('existing_roles_of_the_group');

    var parm = '';
    if (window === null)
        parm = 'portal';
    else
        parm = 'native';

    var ajax = new GlideAjax('GetRoleOfGroupList');
    ajax.addParam('sysparm_name', 'getUserGroups');
    ajax.addParam('sysparm_request_for', newValue);
    ajax.addParam('sysparm_view', parm);
    ajax.getXML(populateValues);
}

function populateValues(response) {
    var answer = response.responseXML.documentElement.getAttribute("answer");
   var arr = answer.split('\\');
	alert(arr);

    // give here the list collector variable name
    if (window === null) {
         g_form.setValue('existing_roles_of_the_group', arr[0]); 

    } else {
        addItemstoList('existing_roles_of_the_group', answer); // Native Compatible
    }
}

function addItemstoList(listCollector, groupList) {

    var parser = JSON.parse(groupList);

    var arrSysId = [];
    var arrName = [];
    for (var i = 0; i < parser.length; i++) {
        arrName.push(parser[i].name.toString());
        arrSysId.push(parser[i].sys_id.toString());
    }

    var varName = listCollector;
    var leftBucket = gel(varName + '_select_0');
    var rightBucket = gel(varName + '_select_1');
    var rightOptions = rightBucket.options;
    var rightIDs = [];

    //Remove --None--
    for (var k = 0; k < rightOptions.length; k++) {
        var value = rightOptions[k].innerHTML;
        if (value == '--None--') {
            rightBucket.remove(0);
        }
    }

    // Add new options
    if (arrName.length > 0) {
        var myCIArray = arrName.toString().split(',');
        for (var j = 0; j < myCIArray.length; j++) {
            addOption(rightBucket, arrSysId[j], myCIArray[j]);
            sortSelect(rightBucket);
            leftBucket.onchange();
        }
    }

    // sort the buckets
    sortSelect(rightBucket);
}

Script Include:

var GetRoleOfGroupList = Class.create();
GetRoleOfGroupList.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    getUserGroups: function() {

        var listGroup = [];
        var requester = this.getParameter('sysparm_request_for');
        var parm = this.getParameter('sysparm_view');

        var jsonArr = [];

        var recGrp = new GlideRecord('sys_group_has_role');
        recGrp.addQuery('group', requester);
        recGrp.query();
        while (recGrp.next()) {

            listGroup.push(recGrp.role.toString());
            var obj = {};
            obj.name = recGrp.role.name.toString();
            obj.sys_id = recGrp.role.toString();
            jsonArr.push(recGrp.role.toString());

        }
        gs.info('Group Roles: ' + JSON.stringify(listGroup) + '; ' + JSON.stringify(jsonArr));

        if (parm == 'portal')
            return listGroup.toString();
        else
            return JSON.stringify(jsonArr);

    },
    type: 'GetRoleOfGroupList'
});

look into it 
output:

only one role is adding actually the group has 2 roles so help with the code or suggest me another way