How to render same list in multiple datatables in primefaces - jsf

Question

I'm using primefaces and I want to populate two datatables with same list.
When I select any one of the books, two panels are shown. The first one shows the details of the book and the author(s). The authors being displayed in the first panel is an editable datatable. I also want to display the same datatable in the second panel. But as you can see it says "No records found". How do I achieve it?
My jsf page is as below:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/templates/Layout.xhtml">
<ui:define name="content">
<f:view>
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<p:dataTable value="#{webBooks.entries}" var="book" id="bookList"
styleClass="order-table"
rows="3" paginator="true" editMode="true" editable="true">
<div>
<f:facet name="header">
<p:outputLabel value="Books List"/>
</f:facet>
</div>
<p:columnGroup type="header">
<p:row>
<p:column style="width:10px"/>
<p:column headerText="Id" style="width:30px"/>
<p:column headerText="Book Title" style="width:200px"/>
<p:column headerText="Price" style="width:30px"/>
</p:row>
</p:columnGroup>
<p:column>
<p:commandButton update=":form:bookDetail"
onclick="PF('bookDialog').show(), PF('authorDialog').show()"
title="View Book Detail"
icon="fa fa-info-circle">
<f:setPropertyActionListener value="#{book}" target="#{webBooks.selectedBook}"/>
</p:commandButton>
</p:column>
<p:column>
<p:outputLabel value="#{book.id}"/>
</p:column>
<p:column>
<p:outputLabel value="#{book.title}"/>
</p:column>
<p:column>
<p:outputLabel value="#{book.price}"/>
</p:column>
</p:dataTable>
<p:panelGrid columns="2">
<p:panel id="bookDetail"
header="Book Info"
closable="true"
toggleable="true"
widgetVar="bookDialog" visible="false" style="width:420px;height:250px;">
<p:panelGrid columns="2"
rendered="#{not empty webBooks.selectedBook}">
<h:outputLabel value="Id" />
<p:outputLabel value="#{webBooks.selectedBook.id}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.id}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Title"/>
<p:inputText value="#{webBooks.selectedBook.title}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.title}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Price"/>
<p:inputText value="#{webBooks.selectedBook.price}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.price}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Author(s)" />
<p:dataTable value="#{webBooks.selectedBook.authoredBy}"
var="authoredBy"
id="authorList"
scrollable="true"
scrollHeight="70"
scrollWidth="300"
editable="true">
<p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
<p:columnGroup type="header">
<p:row>
<p:column style="width:30px" headerText="Id"/>
<p:column style="width:100px" headerText="Author Name"/>
</p:row>
</p:columnGroup>
<p:column>
<p:outputLabel value="#{authoredBy.id}"/>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panelGrid>
<p:commandButton value="Edit"
action="#{webBooks.edit(webBooks.selectedBook)}"
rendered="#{not webBooks.selectedBook.editable}"
update=":form:bookDetail"/>
<p:commandButton value="Save"
actionListener="#{webBooks.save(webBooks.selectedBook)}"
rendered="#{webBooks.selectedBook.editable}"
update="bookList"
process="#form"
id="save"
oncomplete="PF('bookDialog').close()"/>
<p:commandButton value="Cancel"
actionListener="#{webBooks.cancel(webBooks.selectedBook)}"
rendered="#{webBooks.selectedBook.editable}"
update=":form:bookDetail"/>
<p:commandButton value="Delete"
actionListener="#{webBooks.remove(webBooks.selectedBook)}"
onclick="return confirm('Are you sure?')"
id="remove"
update="bookList"
process="#form"
oncomplete="PF('bookDialog').close()"/>
</p:panel>
<p:panel header="Author Info"
widgetVar="authorDialog"
closable="true"
toggleable="true"
visible="false" style="width:420px;height:250px;">
<p:panelGrid columns="2">
<p:dataTable value="#{webBooks.selectedBook.authoredBy}"
var="authoredBy"
id="authorsList"
scrollable="true"
scrollHeight="150"
scrollWidth="300"
editable="true">
<p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
<p:columnGroup type="header">
<p:row>
<p:column style="width:30px" headerText="Id"/>
<p:column style="width:100px" headerText="Author Name"/>
</p:row>
</p:columnGroup>
<p:column>
<p:outputLabel value="#{authoredBy.id}"/>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panelGrid>
</p:panel>
</p:panelGrid>
</h:form>
</f:view>
</ui:define>

Answer 1

You are only updating update=":form:bookDetail" in your "View Book Detail" button. Add an ID to the panel "Author Info" and update that as well:
<p:commandButton update=":form:bookDetail :form:authorDetail"
...>
...
</p:commandButton>
...
<p:panel id="authorDetail"
header="Author Info"
...>
...
</p:panel>
See also:
Can 'update' attribute update two components simultanously?