In ios the clear button was removed for some reason (Its there but hidden and does nothing if shown). On the PC the clear button is working fine in Chrome and Edge (not firefox) and is working on mac in safari and chrome.
Your example will therefore for most users be providing a double clear button and look very messy indeed. You should just use input type=“text” instead if you must have the js added so that you don’t get the double clear button.
e.g. This is a very basic example.