angular 4 nested reactive form add input on value change to parent of input ONLY

Question

I have a reactive form with nested formarray group. I have an input that is added on when user type/select **other: ** (there is a space after the colon ( : )) . But the input is showing everywhere not just next to the selected/parent input it shows up next to all the inputS that have the same name.
Here is the code .
How can I have the other input field show just next to parent input?

code with CSS

Answer 1

From what I understood from your question you are trying to change some flags per row, but you write values of those flags to a global variable.
What you can do is to pass personRow as parameter to the function which handles the change and then depending on the event type set the flag in the personRow object itself. That way you can achieve higher level of granularity in control over the behaviour of your form.

Modified stackblitz can be found here

PS please consider separating your component into a set of smaller/reusable ones, it will be easier to manage and easier to modify.