Happy to help! The issue you're bumping into here is that you've technically got 4 select dropdowns with a name of "sub_frequency". You're then hiding and showing them dynamically based on what the customer selects for their laundry package, and dynamically setting the first sub_frequency dropdown to be required.

If the first dropdown is the one that's visible on the page - then that works fine, as the one that's visible is the one that's also required. If you switch to a laundry package that uses the second, third or fourth sub_frequency dropdown though - then you're in a situation where the first select dropdown is set to required, but also hidden.

That's why Chrome is showing the error that the field isn't focusable. It knows that that field is required - but as it's hidden it can't give focus to that field to show it needs to be completed.

Beyond that though - a form can only have a single element with a given name. If there are multiple inputs in the form with the same name, only the last instance of that field name will be used. So for your example, no matter which select is being shown to the customer - only the last select with a name of "sub_frequency" will be used to set the value.

One approach you could take is to dynamically add/remove the "sub_frequency" name from the select element to ensure only one of those is submitted - and also set the required attribute on the correct element too.