Rendered attribute has no effect in dropdown, while it works in input text

I have data table with a dropdown and an input text. I have a button which adds a new row to the data table.

On add, I want to show the submitted value of dropdown and input text of previous row as output text, and display the dropdown and input text in the new row only.

I have used rendered attribute on the dropdown, input text and output text. However, when I add a new row, the dropdown and output text are both shown in the previous row.

<h:dataTable id="Table" value="#{bean.orderList}" var="attr" binding="#{bean.orderTable}">
    <h:column>
        <f:facet name="header">
            <h:outputText value="Item"/>
        </f:facet>
        <h:outputText value="#{attr.orderItem.ItemId}" rendered="#{attr.orderItem.ItemId != null}" />
        <h:selectOneMenu value="#{attr.orderItem.ItemId}" rendered="#{attr.orderItem.ItemId == null}">
            <f:selectItems value="#{bean.itemList}" var="attrList" itemValue="#{attrList.itemId}" itemLabel="#{attrList.itemName}" />
        </h:selectOneMenu>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Price" />
        </f:facet>
        <h:outputText value="#{attr.price}" rendered="#{attr.orderItem.itemId != null}" />
        <h:inputText value="#{attr.price}" rendered="#{attr.orderItem.itemId == null}" />
    </h:column>
</h:dataTable>

<a4j:commandButton value="Add" execute="@form" action="#{bean.addAction}" render=":Table" />

Look closer where it fails:

<h:outputText    ... rendered="#{attr.orderItem.ItemId != null}">
<h:selectOneMenu ... rendered="#{attr.orderItem.ItemId == null}">

and where it works:

<h:outputText ... rendered="#{attr.orderItem.itemId != null}">
<h:inputText  ... rendered="#{attr.orderItem.itemId == null}">

The one says ItemId and the other says itemId. Align it out. Properties always start with lowercase unless they start with 2 uppercased characters by themselves.