Repeat pageblocksection on commandbutton click

Question

I have a visualforce page and i'm going to add multiple Product into my custom object but where i am stuck is i am not able to set <apex:repeat> to my pageblocksection

I just want to repeat the Pageblocksection when user need to add multiple Product..

I tried but it's not getting me the expected result

Visualforce :

<apex:pageBlock >
<apex:pageBlockButtons location="Bottom">
    <apex:commandButton value="Add Product" action="{!addSection1}" reRender="qbp"/>
</apex:pageBlockButtons>
    <apex:outputPanel id="qbp">
    <div>
    <ul id="sortable">
    <apex:variable value="" var="foo" rendered="{!IF(lstSections1 = True, true, false)}">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
            <apex:repeat value="{!QBP}" var="q">
            <apex:pageBlockSection title="Select Product">
            <apex:pageBlockSectionItem >
                <apex:actionRegion >
                    <apex:outputLabel value="Select Product :" />
                    <apex:inputField value="{!q.Product__c}" >
                        <apex:actionSupport event="onchange" rerender="relatedInfo" action="{!retrieveproductInfo}" immediate="false"/>
                    </apex:inputField>
                        <apex:pageBlockSection id="relatedInfo">
                            <apex:outputText value="{!partNumber}" label="Part Number :"/>
                            <apex:outputText value="{!Description}" label="Description :"/>
                            <apex:inputField value="{!q.Quantity__c}"/>
                        </apex:pageBlockSection>
                </apex:actionRegion>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            </apex:repeat>
        </li>
    </apex:variable>
    </ul>
    </div>        
    </apex:outputPanel>
</apex:pageBlock>