How to deal with two search inputs

Because of my mobile design not being able to share the HTML structure of the desktop version, I need to use two search inputs. When I do that, because of the similar dom element IDs, it breaks.
How can I handle this?


You should be able to give both inputs a separate id, however a better option will be to only have one of the html element visible at the same time. You can add and remove those with js normally

That’s what I have. 2 dom elements and one being part of the mobile version only. Still doesn’t do anything when I change the ID. Is it because it’s hidden when it first loads? Or do I need to change something in the admin? (I don’t have access to it.)

Thanks a lot!!!

Here’s an example with two search boxes, one only being visible < 500px wide

Thanks a lot!!! That worked