File Operation - how to let the user choose multiple pdf files to open them in single HTML page?

Hey I am trying to make an HTML - CSS - JS app (Single offline HTML file that will run on Chrome or Firefox for Windows); where Multiple PDF files in an Windows desktop could be simultaneously seen, scrolled and notes can be taken and saved as .txt .

I tried to write some lines of codes where

  1. the user have to browse the files using HTML form field,
  2. the file name will be taken as a js string, and
  3. an innerhtml will send the filename as an html iframe or embed’s input.

This (Above path) gives me weird result. I can only see a very small preview of the pdf, and only 1 pdf at a time.
Whereas (method B) if I manually type the file path as iframe input, inseparate div, i can open multiple pdf files excellently.
However the method B will be inconvenient for the user, because it will require constantly manually editing the HTML and manually enter the iframe input. How can I let the user just browse and choose the files?