data-toggle failing when an ID is a number

Created by: TikiTDO

I have a scenario with a bunch of data-toggle="collapse" href="5" etc... With the change to using document.querySelectors the lookup for such IDs is failing. This causes the data-toggle directive to no longer work for code that was working previously.

In my case this line was failing.

Please refer to this example in Chrome 68+ to get an idea of the failure scenario. With my setup I get the following output:

JS error: #1
JQ found: #1

JS found: #two2
JQ found: #two2

JS error: #3three
JQ found: #3three

JS not found: #invalid
JQ not found: #invalid

• Operating system and version: Arch Linux, OSX, RHEL, Windows 10
• Browser and version: Chrome 68
• Some possible fixes:
  1. Return to using jQuery for resolving selectors,
  2. Convert the first letter of the ID to a unicode escape string
  3. Use document.getElementById or document.getElementByClassName whenever possible