Browser breaks DOM structure of PDF

I have a PDF with form fields and static texts as a starting point. The form fields gets populated by my web application [Fname, LName, Date etc]. Once populated, the PDF becomes readonly for the user and is available for download and viewing on the browser. For accessibility testing, I download the PDF and run the NVDA/JAWS/Adobe Read Aloud and the static and the dynamic text is read very properly, [i.e field label first, followed by the field data].However when i opt to view the PDF in any browser [Chrome, FireFox] and run the screenreaders on it, all the field labels are read first [First Name, Last Name, Middle Name etc] and then it starts to read the data that the populated in the form fields. Inspecting the browser shows the DOM structure where all labels are grouped together and all the form fields are grouped together. I really need the browser to respect the DOM strctue of the PDF that it was created with, instead of the broken structure.

I retried by creating a standalong PDF [2 labels, 2 textfields] and dropped it in the browser to inspect and i see the same broken DOM structure- so my web application isnt introducing the problem here - it already exists! 

I am not v familiar with PDF tech so do not know if my expectation of seeing the well formed PDF rendered the same way in the browser is accurat or misplaced.

What am i doing wrong in creation of the PDF or mis-configuration of a PDF setting here?

Appreciate any advise