Create rows of radioItems dynamically


I would like to seek help for the following problem:

I have created two divs, the first is a table presented using plotly’s figure factory, and the second will be a few rows of radioItems. The number of rows in the second div should be the same as the number of rows in the table in the first div. Each row will also have 3 labels. Preferably the row should be labelled with the index of the table in the first div. So in summary, it’ll look something like this:

First div:
column1 | column2
date1 | value
date2 | value

Second div:
date1 | radioItem1 | radioitem2 | radioItem3
date2 | radioItem1 | radioItem2 | radioItem3

I am trying to create the radioitems using a callback with the output on the id of the second div, and input being the id of the first div. However I am not sure how I should go about grabbing the column data from the first div.

My plan was to get the a list of dates from the original dataframe used to generate the table in the first div, and then create each radioItem incrementally by running a for loop through the list of dates. However it’s not working. I’ll really appreciate it if someone could give me some input on this problem! thank you!