MuliSelect Picklist Image

Hi SFDC Gems,

I am using two multiselect Picklists(leftSiteAppItems and rightSiteAppItems) and moving data from 'selectSiteApplication' and 'unselectSiteApplication' but data is not moving properly

from left selectList to right selectList.Please suggest If i am missing some logic in selectSiteApplication() and unselectSiteApplication()

functions.Please find screenshot of Multiselect Picklists in Link at the Top.

=======VF Page==========

<apex:outputLabel >Select Service/Model:</apex:outputLabel>

    <apex:selectList value="{!selectedServiceModel2}" label="Select Service/Model:" size="1" onchange="getSiteApplications()">

        <apex:selectOptions value="{!addServiceModel}"></apex:selectOptions>

        <apex:actionFunction action="{!getSiteApplications}" name="getSiteApplications" reRender="leftSelectedSiteApp,rightSelectedSiteApp"/>

    </apex:selectList> <br/><br/><br/>

    <apex:outputLabel value="Available:"  />

        <apex:outputLabel value="Selected:" /><br/>

        <div>Site Application</div>

        <div>Site Application</div>

        <apex:panelGrid columns="6" id="siteApp">

            <apex:selectList id="leftSelectedSiteApp" value="{!leftSelectedSiteApp}" multiselect="true"   size="6">

                <apex:selectOptions value="{!leftSiteAppItems}"></apex:selectOptions>

            </apex:selectList>

            <apex:panelGroup >

                <apex:commandButton value="     >      " action="{!selectSiteApplication}" >

                    <apex:actionSupport event="onClick" reRender="leftSelectedSiteApp,rightSelectedSiteApp"/>

                </apex:commandButton><br/><br/>

                <apex:commandButton value="     <      " action="{!unselectSiteApplication}" >

                    <apex:actionSupport reRender="leftSelectedSiteApp,rightSelectedSiteApp" event="onClick"/>

                </apex:commandButton>

            </apex:panelGroup>

            <apex:selectList id="rightSelectedSiteApp" value="{!rightSelectedSiteApp}" multiselect="true" size="6">

                <apex:selectOptions value="{!rightSiteAppItems}"></apex:selectOptions>

            </apex:selectList>

    </apex:panelGrid><br/>

======Contoller===============

Public with sharing class test{    

                public Set<SelectOption> lftSiteAppId{get;set;}

                public Set<SelectOption> rghtSiteAppId{get;set;}

                public List<String> leftSelectedSiteApp{get;set;}

                public List<String> rightSelectedSiteApp{get;set;}

                public List<SelectOption> leftSiteAppItems{get;set;}

                public List<SelectOption> rightSiteAppItems{get;set;}

                test(){

                }

                public void getSiteApplications(){

                                lftSiteAppId = new Set<SelectOption>();

                                leftSiteAppItems = new List<SelectOption>();

                                rghtSiteAppId = new Set<SelectOption>();

                                rightSiteAppItems = new List<SelectOption>();

                                lftSiteAppId.add(new SelectOption('Banchiao Taiwan/ BaaN IV','Banchiao Taiwan/ BaaN IV'));

                                leftSiteAppItems.add(new SelectOption('Banchiao Taiwan/ BaaN IV','Banchiao Taiwan/ BaaN IV'));

                                rghtSiteAppId.add(new SelectOption('Lodz-Poland (FGS)/ BaaN IV','Lodz-Poland (FGS)/ BaaN IV'));

        rghtSiteAppId.add(new SelectOption('Manchester-UK (FGS)/ BaaN IV','Manchester-UK (FGS)/ BaaN IV'));

                                rghtSiteAppId.add(new SelectOption('Venray-Netherlands FGS/ BaaN IV','Venray-Netherlands FGS/ BaaN IV'));

        rightSiteAppItems.add(new SelectOption('Lodz-Poland (FGS)/ BaaN IV','Lodz-Poland (FGS)/ BaaN IV'));

                                rightSiteAppItems.add(new SelectOption('Manchester-UK (FGS)/ BaaN IV','Manchester-UK (FGS)/ BaaN IV'));

        rightSiteAppItems.add(new SelectOption('Venray-Netherlands FGS/ BaaN IV','Venray-Netherlands FGS/ BaaN IV'));

    }

                public void selectSiteApplication(){

                                Integer i=0;

                                for(SelectOption option : lftSiteAppId){

            if(option.getValue()==leftSelectedSiteApp.get(i)){

                                                                leftSiteAppItems.remove(i);

                                                                rightSiteAppItems.add(new SelectOption(option.getValue(),option.getValue()));

                                                                i++;

            }

        }

    }

    public void unselectSiteApplication(){

                                Integer i=0;

                                for(SelectOption option : rghtSiteAppId){

            if(option.getValue()==rightSelectedSiteApp.get(i)){

                rightSiteAppItems.remove(i);

                leftSiteAppItems.add(new SelectOption(option.getValue(),option.getValue()));

                                                                i++;

            }

        }

    }

}