Jsf component ids are not getting modified in javascript.

Hi Techies,

I am facing a problem in the below code. what exactly it shows is a multiselectcheck drop down box where it can be extended or collapsed if any click event on it. An atrribute of an component ,i.e stlye.disply value getting set in java script funtion of onclick when click event is done. but it could not retaining the page.

Please help me out!!!

//test.xhtml

--------------------------------------------------------------------------------<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<script type="text/javascript" language="javascript">
/* <![CDATA[ */ 
	
	function showhideoptions(cmdbtnId,checkboxId){
		try{
		 var commandBtnVar = document.getElementById(cmdbtnId);
		 var checkboxIdVar = document.getElementById(checkboxId);
		 if(!checkboxIdVar) return true;
		 if(checkboxIdVar.style.display=="none"){
			 checkboxIdVar.style.display="block";
			 commandBtnVar.value = '▲';
		 } else {
			 checkboxIdVar.style.display="none";
			 commandBtnVar.value = '▼';
		 }
		}catch(err ){
			 console.error("error occured."+err);
		}
	}
	function showSelectedChkBoxValues(checkboxIDObj, txtID){
		var mytxtID = document.getElementById(txtID);
		var multiCheckBoxList = document.getElementsByName(checkboxIDObj);
		var checkboxLength = multiCheckBoxList.length;
		var strvalue ="";
		for( var itr = 0; itr ><= checkboxLength ;itr++)
		{
			if (typeof multiCheckBoxList[itr] != 'undefined'){
				if(multiCheckBoxList[itr].checked == true){
					if(itr == 0){
						strvalue = strvalue + multiCheckBoxList[itr].value;
					}else{
						strvalue = strvalue+","+ multiCheckBoxList[itr].value;
					}
				}
			}
		}
		mytxtID.value = strvalue;
	}
		
	/* ]]> */ 
	</script>
	<style type="text/css">
	
	</style>
</h:head>
<body>
<f:view>
<h:form name="myform" id="formID">
		<div id="parentDiv" style="border:solid 2px #848484;width:22%;">
    		<h:inputText id="txtid" label="MyText" style="width:85%" value="#{mybean.demandStatusLabelList}"/>
    		<h:commandButton value="▼" id="cmdbtnid" name="commandbuttonName" onclick="showhideoptions('formID:cmdbtnid','formID:selectmanycheckboxid');" />
    		
    		<h:selectManyCheckbox id="selectmanycheckboxid" value="#{mybean.demandStatusArray}" layout="pageDirection" style="display:none"
    			onclick="showSelectedChkBoxValues('formID:selectmanycheckboxid','formID:txtid');">
	   			<f:selectItems value="#{mybean.selectedDemandStatusMap}" />
	   		</h:selectManyCheckbox>
	   	
    	</div>
</h:form>
</f:view>
</body>
</html>

backingbean

--------------------------------------------------------------------------------
@ManagedBean (name="mybean")
@SessionScoped
public class MyBean implements Serializable {

/**
* 
*/
private static final long serialVersionUID = 1L;

private Map<String,Object> demandStatusMap;

private String[] demandStatusArray;

private List<String> demandStatusLabelList;

private List<String> selectedDemandStatus;
/**
* getSelectedDemandLocationsMap
* @return
*/
public Map<String,Object> getSelectedDemandStatusMap(){
/*
* These objects should come from DB.For the time being hard coding all values. 
*/
demandStatusMap = new LinkedHashMap<String, Object>();
demandStatusMap.put("ALL","ALL");
demandStatusMap.put("OP","OP");
demandStatusMap.put("SA","SA");
demandStatusMap.put("CA","CA");
demandStatusMap.put("AA","AA");
demandStatusMap.put("OR","OR");
demandStatusMap.put("EX","EX");

return demandStatusMap;
}

public String getDemandStatusArrayInString() {
return Arrays.toString(demandStatusArray);
}

/**
* @return the demandStatusArray
*/
public String[] getDemandStatusArray() {
return demandStatusArray;
}

/**
* @param demandStatusArray the demandStatusArray to set
*/
public void setDemandStatusArray(String[] demandStatusArray) {
this.demandStatusArray = demandStatusArray;
}

/**
* @return the demandStatusLabelList
*/
public List<String> getDemandStatusLabelList() {
return demandStatusLabelList;
}

/**
* @param demandStatusLabelList the demandStatusLabelList to set
*/
public void setDemandStatusLabelList(List<String> demandStatusLabelList) {
this.demandStatusLabelList = demandStatusLabelList;
}

/**
* @return the selectedDemandStatus
*/
public List<String> getSelectedDemandStatus() {
return selectedDemandStatus;
}

/**
* @param selectedDemandStatus the selectedDemandStatus to set
*/
public void setSelectedDemandStatus(List<String> selectedDemandStatus) {
this.selectedDemandStatus = selectedDemandStatus;
}

public List<String> populatedDemandStatusValues(){
demandStatusLabelList = getLabelValue(selectedDemandStatus);
return demandStatusLabelList;
}

public static List<String> getLabelValue(List<String> selectedDemandLocations)
{
List<String> selectedlist = new ArrayList<String>();
if(selectedDemandLocations == null || selectedDemandLocations.size()==0){
selectedlist.add("Select");
}
else
{
Iterator<String> itr = selectedDemandLocations.iterator();
while(itr.hasNext())
{
String names = (String)itr.next();
selectedlist.add(names);
}
}
return selectedlist;
}

}