Recommend approach to create a form that needs to show unlimited rows

I'm designing a form web page where users need to insert data. Part of the form is the main form information but there is another part that takes unknown number of entered rows.

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 should enter one food per row, where each row contains fixed information/features. about the food (color, takes .. etc). The features are encoded as drop-down menus that contain pictures. Have a look at the sketch:

So the user need to create many rows, where each row corresponds to one set of the green boxes, (i.e. one row has the information of 12 features for the single 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 it would blow up the Browser!

Can you recommend a good approach to solve this design/UX problem? What is a good UX solution to this situation? The approach needs to be compatible with mobile, tablet and desktop usage.