This is the question has been asked multiple times in various forums - Can my client-side Javascript (running in a browser) connect to a database server and fetch data?
The short answer is - not recommended in general, not feasible without breaching security and without using outdated technologies. Let us dig into it.
It is possible to connect to remote database from a browser using outdated technologies
There are two pieces of technologies from Java and .Net worlds - Applet and ActiveX that run on the browser and can communicate to a remote database. The Java Applet is hardly used by anyone nowadays and browsers are stopping to support it. ActiveX is discontinued by Microsoft in their newer browser Edge. So, you have to enforce your target users to use old insecure browsers if you want to go with these options.
Do not use this.
Use databases embedded in the browser and sync with a remote database
You may use the database locally available in the browser and perform all read/write operations. Periodically sync this database with a remote one. Here are the options:
MongoDB and use change stream to sync with a remote MongoDB
PouchDB and sync with a remote CouchDB or even a MySQL database
Use this only for offline storage temporarily in the browser.
The traditional and secure approach to connect to a remote Database
Use a server-side technology to develop an app that your client-side code (Javascript, HTML) talks to. The app may provide RESTful APIs to interact from the client-side. Then the app that is running in a web server connects and interacts with the database. There are plenty of server-side technologies such as Java, PHP, Python, NodeJS (Javascript based), .Net, etc. to develop your server-side app.
Go with this option.