Using a class as a selector, rather than id

[finanalyst]

• System Information

  • Browser type and version: Firefox 135.0 (64-bit)
  • [x OS type and version: Ubuntu 22.04.5 LTS
  • WINDOWS: be sure to indicate which terminal you're using -- (i.e., cmd.exe, powershell, git- bash, cygwin, Ubuntu via windows subsystem for linux, etc...)
  • Node version (IF applicable)
    • Any error messages that may be in the console where you ran npm start
  • Any error messages in the JS console

• Describe the bug

In the documentation it says:

selector (optional) Responsible for the input, textarea, or contentEditable element selection
Type: String of selector | Function returns Element
Default: #autoComplete

In order to make the website responsive, I have two <input class="myAutocomplete" ...>, one in a div that is visible for desktops, and one for touch devices.

I have the following in the JS

autoCompleteJS = new autoComplete({
    selector: ".myAutoComplete",
    placeHolder: "🔍",
...

When the first input tag, in the html document (in my case for the touch format), is visible, the autoComplete functionality works as expected.
When the second input tag in the html document (in my case for the desktop format) is visible, the autoComplete functionality does not work.

The aim is to have both input tags operate on the same data.

So, either the documentation is slightly inaccurate, as not every selector is possible, or incomplete in that only the first instance of the selector will be chosen (in the same way the querySelector('.myAutoComplete') will return the first instance).

If this is not a bug, but expected behaviour, what is the best way to have two inputs? Or are two instances of autoComplete needed?