Save Input Boxes' (within Row component) data to Object variable

Hi Everyone,
Thanks in advance for your help.
I am looking for some guidance on how to save user input data from Input boxes within a Row component to a data variable of object type on button tap.

I have a repeating Row component that has 3 input boxes. And a tick button to save and cross button to delete the entry.
I also have Add Subject button, which is meant to add the above Row component on Button tap.

I need help to accomplish the following:

  1. On Button tap of ‘Add Subject’ button. I would like to see a new row added (with the 3 input boxes and tick and cross buttons).
  2. On clicking the green tick icon, the entry is saved to local storage, that I have created with following schema:
id - text
subject - text
max - number
goal - number
visible - true/false

what i would is having the list of the data just to display them and also having the same thing above (but not as a list, as a single component) that way, you can have that as the input and playing with the visibility, you can hide and show that box.

The idea here, is that you have two different things that look the same, the one is a list and the other works as the input field.
Hope you understand