I'm designing a form web page where users need to insert data. Part of the form is the information of the main form, but there is another part that takes an unknown number of rows entered.
Here is an example. Suppose I have a questionnaire that asks a user about his favorite food. So we need a section for user information; This is the main information. But then I need a part in the form where the user must enter one food per row, where each row contains information / fixed characteristics. about food (color, take .. etc). The features are encoded as drop-down menus containing images. Take a look at the sketch:
Therefore, the user must create many rows, where each row corresponds to a set of green boxes (that is, a row has the information of 12 characteristics for the individual food).
Since the user needs to create many rows, a naive solution is to repeat the same green boxes for each row. But this is a bad solution since the browser would fly!
Can you recommend a good approach to solve this design / UX problem? What is a good UX solution for this situation? The approach must be compatible with the use of mobile devices, tablets and desktop computers.