'Duplicate hidden form with not unique input ID

I have a layout that require to have the same form in 2 different place for mobile and desktop view

What I did is to wrap both in a container that hide one or another based on viewport size

I was testing with Google Lighthouse and it complains that form field ID are not unique Any way to fix this without handle the 2 form field with different ID?

I always add input field with the same ID and NAME

<input type="text" class="form-control" id="name" name="name" value="" required>

I guess I will not have any issue with post variables if I differentiate ID while keeping field name the same

<input type="text" class="form-control" id="name-mobile" name="name" value="" required>


Solution 1:[1]

IDs must be unique within an HTML document, so no, there is no way to do this without changing the IDs.

I guess I will not have any issue with post variables if I differentiate ID while keeping field name the same

IDs have no relevance whatsoever in creating the form submission data set. Question would be, whether IDs are actually needed for anything in particular here to begin with.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 CBroe