Hi Community,

I have a Multi picklist, My reqirement is as follows.

when I select from left options and move them to the right, I should display the the left options as it is and show the selected in right ---------> I amgood with this.

The issue is when I select options from the right and move them to the left issue is over there.

If i click the unselect button even with out pointing a specific element in the right options, bottom most element get removed from the right options. 
Smple code of the unSelect button.
<apex:panelGrid columns="4" id="grid2">              
                   
                    <apex:selectList id="sel3" value="{!leftSelectedRatProds}" multiselect="true" style="width:120px" size="15">
                        <apex:selectOptions value="{!unSelectedRatProductValues}" />
                    </apex:selectList>
       
                        <apex:panelGroup >
       
                            <br/>
                            <apex:image id="rightrat" value="{!$Resource.RightArrowButton}" width="30px" height="30px">
                                <apex:actionSupport event="onclick" action="{!selectRatProduct}" reRender="grid2"/>
                            </apex:image>
       
                            <br/>
                            <apex:image id="leftrat" value="{!$Resource.LeftArrowButton}" width="30px" height="30px" >
                                <apex:actionSupport event="onclick"  action="{!unselectRatProduct}" reRender="grid2"/>
                            </apex:image>
       
                        </apex:panelGroup>
       
                    <apex:selectList id="sel4" value="{!rightSelectedRatProds}" multiselect="true" style="width:120px" size="15">
       
                        <apex:selectOptions value="{!SelectedRatProductValues}"  />
       
                    </apex:selectList>
                   
                </apex:panelGrid>
********************************************
public PageReference unselectRatProduct(){
    
       // leftSelectedRatProds.clear();
     for(Integer i=0;i<=rightSelectedRatProds.size(); i++){
      if(rightRatProds != null && rightRatProds.size()>0){
     rightRatProds.remove(i);
      }
   }
         
        for(String s : rightSelectedRatProds){  
         //rightRatProds.remove(s);
         leftRatProds.add(s);
        }
      
        return null;   
    }

Please share some idea or suggest the code changes in the above given method or vf script.
Thanks,