On a webpage, I'm working on I have a series of buttons that are rendered on the page as repeating, generated <li> elements inside of <ul> tags. The selections are sequential, with a limit of one selection in the first list and the second list only being rendered after choosing from the first list. You can only choose one item in the first list and multiple items in the second one. When testing the webpage out on my iPhone I can't change my selection from the first section or deselect anything I've selected in the second list.
This issue is exclusive to pre-iOS 13 iPhones. Androids and iPhones with iOS 13 or later have no issues dealing with this page. This bug flew under the radar for me for a while because I was verifying my mobile changes by using the mobile view emulator on Chrome developer tools. The issue does not appear there.
I've looked everywhere for other people encountering this issue, but it doesn't seem that common. Should I tackle this via Javascript, CSS, or HTML?
So it turned out that this issue was due to jquery compatibility, and the fix was frustratingly simple. Just add onclick='' to the list elements and that restores normal intended functionality.