Primefaces file upload UI issue per table row - jsf-2.2

Question

I have a Primefaces 5.1 tabular UI on front-end.
Each row has upload button.
When browsed and selected file at a particular row, the upload button becomes active at the last row.
It needs to be active where the file is browsed and selected.
There seems to be a javascript bug while using the file uploader combined with tabular UI.
The upload button works(other than its UI at a different row) and the file is uploaded to the right row(the row that the file was browsed previously).
<h:panelGroup rendered="#{datas.attach_doc_ids==null}">
<p:growl id="uploadMSG" showDetail="true"/>
<p:fileUpload
previewWidth="0"
process="data_tab"
id="file_upper"
styleClass="fileUploadStyle"
onstart="showloader();"
oncomplete="hideloader();"
auto="false"
mode="advanced"
label=""
dragDropSupport="false"
widgetVar="fileUploader"
fileUploadListener="#{datasBean.submitUploadedFile}"
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
onerror="console.log('bad file type!');"
update="uploadMSG"/>
<script>
registerRowClickForFileUpload(#{indexvar});
</script>
</h:panelGroup>
Would you know what might be causing this?
Also the datatable definition below:
styleClass="wr_datatable"
id="data_tab"
paginatorPosition="bottom"
var="datas"
value="#{datasBean.listDatas}"
widgetVar="dataTable"
emptyMessage="No data found. Please change the search criteria above."
paginator="true"
selection="#{datasBean.selectedData}"
rowKey="#{datas.data_pk}"
selectionMode="single"
rowIndexVar="indexvar"
draggableColumns="true"
resizableColumns="true"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rows="10"
rowsPerPageTemplate="5,10,15,20"
Datatable:
<p:column headerText="Status" width="150"
sortBy="#{datas.data_status}">
<p:selectOneMenu value="#{datas.data_status}" onchange="selectme(#{indexvar});">
<f:selectItem itemValue="0" />
<f:selectItem itemValue="1" />
<f:selectItem itemValue="2" />
<f:selectItem itemValue="3" >
<f:selectItem itemValue="5" />
<f:selectItem itemValue="4" />
<p:ajax event="change"
async="true"
process="#form"
global="true"
update="data_tab"
listener="#{datasBean.updatedataStatus}">
<f:setPropertyActionListener value="#{datas}"
target="#{datasBean.selecteddata}"/>
</p:ajax>
</p:selectOneMenu>
</p:column>
<p:column headerText=“name” sortBy="#{datas.name}" ><h:outputText value="#{datas.name}"/></p:column>
<p:column headerText=“dob"><h:outputText value="#{datas.date_of_birth}"/></p:column>
<p:column headerText=“number” sortBy="#{datas.number}" ><h:outputText value="#{datas.number}”/></p:column>
<p:column headerText=“date” sortBy="#{datas.data_datetime}"><h:outputText value="#{datas.data_datetime}"/></p:column>
<p:column headerText=“second name“ sortBy="#{datas.second_name}”>
<h:outputText value="#{datas.second_name}”/>
</p:column>
<p:column headerText="Institution" sortBy="#{datas.institution}">
<h:outputText value="#{datas.institution}"/>
</p:column>
<p:column headerText="Documents" >
<p:graphicImage library="images"
name="attach-doc-exist.png"
title="Open Attachement Document"
onclick="selectme(#{indexvar});
openDocJS(‘ATTACHEMET_DOCUMENT');"
rendered="#{datas.attach_doc_ids!=null}"/>
<h:panelGroup rendered="#{datas.attach_doc_ids==null}">
<p:growl id="uploadMSG" showDetail="true"/>
<p:fileUpload
previewWidth="0"
process="data_tab"
id="file_upper"
styleClass="fileUploadStyle"
onstart="showloader();"
oncomplete="hideloader();"
auto="false"
mode="advanced"
label=""
dragDropSupport="false"
widgetVar="fileUploader"
fileUploadListener="#{datasBean.submitUploadedFile}"
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
onerror="console.log('bad file type!');"
update="uploadMSG"/>
<script>
registerRowClickForFileUpload(#{indexvar});
</script>
</h:panelGroup>
<p:remoteCommand name="openMedicalReport"
global="true"
async="true"
actionListener="#{datasBean.manageReport}"/>
<p:remoteCommand name="lockFile"
global="true"
async="true"
actionListener="#{datasBean.manageFilePermission}"/>
</p:column>
<p:column headerText="MOD" width="30">
<h:outputText value="#{datas.data_mods}"/>
</p:column>
<p:ajax event="rowSelect" async="true" global="false">
<f:setPropertyActionListener target="#{datasBean.selecteddata}" value="#{datas}" />
</p:ajax>
</p:dataTable>

Answer 1

Replaced the widgetVar with a dynamically generated value to get unique file upload widget which fixed the issue as suggested by the comments above :)
<h:panelGroup rendered="#{datas.attach_doc_ids==null}">
<p:growl id="uploadMSG" showDetail="true"/>
<p:fileUpload
previewWidth="0"
process="data_tab"
id="file_upper"
styleClass="fileUploadStyle"
onstart="showloader();"
oncomplete="hideloader();"
auto="false"
mode="advanced"
label=""
dragDropSupport="false"
widgetVar="#{datas.data_pk}"
fileUploadListener="#{datasBean.submitUploadedFile}"
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
onerror="console.log('bad file type!');"
update="uploadMSG"/>
<script>
registerRowClickForFileUpload(#{indexvar});
</script>
</h:panelGroup>