jsf a4j:commandButton reRender doesn't work

Question

My jsf page works fine if I change the first button to h:commandButton. However, that refreshes the entire page on submit so my requirement is to keep both as ajax supported buttons. My backing bean has all the required methods. The following code doesn't print out the selections when the second button is clicked. The log prints 'null' as selection. What am I doing wrong?

<h:form>
<a4j:commandButton action="#{Bean.getAllReps}" value="Get REPS" reRender="showReps" />
</h:form>
<h:panelGrid columns="1" id="showReps">
    <h:panelGrid rendered="#{Bean.actionComplete eq 'fail'}" width="100%" columns="2">
        <h:outputText value="Could not get Details" style="color: red; font-size:3mm;" />
    </h:panelGrid>
            <h:panelGrid rendered="#{Bean.actionComplete eq 'success'}">
                <h:panelGrid>
                    <h:outputText>
                        <rich:panel>
                            <h:form>
                                <h:panelGrid>
                                    <rich:pickList value="#{Bean.slctdRep}" style="text-align: left;">
                                        <f:selectItems value="#{Bean.allReps}" />
                                    </rich:pickList>
                                </h:panelGrid>

                                <a4j:commandButton value="Show Selection" reRender="content" type="submit"></a4j:commandButton> //This button doesn't perform partial refresh on element with id "content"

                            </h:form>
                        </rich:panel>
                        <rich:panel>
                            <h:panelGroup id="content" layout="block">
                                <h:outputText value="Selected Reps : "></h:outputText>
                                <h:outputText value="#{Bean.selectedRepsInString}"></h:outputText>
                            </h:panelGroup>
                        </rich:panel>

                    </h:outputText>
                </h:panelGrid>
            </h:panelGrid>
</h:panelGrid>

Answer 1

I found the problem, I had two form tags, one for each button and that was causing the issue. I wrapped the entire code in one form and it is working as desired now.

Got the solution from here: commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated

Updated code:

<a4j:form>
    <a4j:commandButton action="#{Bean.getAllReps}" value="Get REPS" reRender="showReps" type="submit" />
    <h:panelGrid columns="1" id="showReps">
        <rich:panel>
            <h:panelGrid>
                <rich:pickList sourceListWidth="200" targetListWidth="200" value="#{Bean.slctdRep}">
                    <f:selectItems value="#{Bean.allReps}" />
                </rich:pickList>
            </h:panelGrid>

            <a4j:commandButton value="Show Selection" reRender="content" type="submit" action="#{Bean.getSelectedReps}" />
        </rich:panel>

        <rich:panel>
            <h:panelGroup layout="block" id="content">
                <h:outputText value="#{Bean.selectedReps}"></h:outputText>
            </h:panelGroup>
        </rich:panel>

    </h:panelGrid>
</a4j:form>