I am trying to set up a shipping fulfillment page that lists opportunities and the products that need to be shipped underneath.  The problem is the list will grow very long if the pageBlockSections (one for each opportunity) cannot be collapsed.  When I use a repeat tag to list the opportunity as pageBlockSections with the products for the opportunity listed inside the pageBlockSection the collapse function throws a javascript error.  Everything looks fine, but the pageBlockSection cannot be collapsed.  Here is the VF code:

<apex:page standardController="Promotion_Registration_Premium__c" extensions="premiumFulfillmentControllerExt"> <div style="color:red;font-weight:bold;"><apex:messages /></div> <apex:pageBlock title="Premium Fulfillment"> <apex:repeat value="{!premiums}" var="premium" id="theRepeat"> <apex:pageBlockSection id="section" title="{!premium.opportunityName}" columns="1"> <apex:form > <apex:pageBlockSectionItem > <table width="100%" cellpadding="5"> <tr> <td width="15%" style="vertical-align:middle"> <div align="right"><strong>Ship To Name:</strong> </div> </td> <td width="35%" style="vertical-align:middle"> {!premium.shipToName} </td> <td width="15%" style="vertical-align:middle"> <div align="right"><strong>Ship To Address: </strong></div> </td> <td width="35%" style="vertical-align:middle"> {!premium.shipToAddress}<br/>{!premium.shipToCity}, &nbsp; {!premium.shipToState} &nbsp; {!premium.shipToPostalCode} <br/> {!premium.shipToCountry} </td> </tr> </table> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem > <apex:dataTable value="{!premium.premiums}" var="prp" width="100%" id="premiumTable"> <apex:column width="25%" headerValue="Product" ><apex:outputField value="{!prp.Product__c}"/></apex:column> <apex:column width="15%"> <apex:facet name="header"><div align="right">Quantity Ordered</div></apex:facet> <div align="right"><apex:outputField value="{!prp.Quantity__c}"/></div> </apex:column> <apex:column width="15%"> <apex:facet name="header"><div align="center">Shipped Via</div></apex:facet> <div align="center"><apex:inputField value="{!prp.Shipped_Via__c}"/></div> </apex:column> <apex:column width="15%"> <apex:facet name="header"><div align="center">Tracking Number</div></apex:facet> <div align="center"><apex:inputField value="{!prp.Tracking_Number__c}"/></div> </apex:column> <apex:column width="15%"> <apex:facet name="header"><div align="right">Quantity Shipped</div></apex:facet> <div align="right"><apex:inputField value="{!prp.Quantity_Shipped__c}"/></div> </apex:column> <apex:column width="15%"> <div align="center"> <apex:commandLink value="Mark as Shipped" action="{!markItemAsShipped}"> <apex:param name="premId" value="{!prp.Id}"/> </apex:commandLink> </div> </apex:column> </apex:dataTable> </apex:pageBlockSectionItem> </apex:form> </apex:pageBlockSection> </apex:repeat> </apex:pageBlock> </apex:page>

Thanks in advance for any help.