editable grid

Hi,

My requirement is to, Enable the particular row( Remarks, start and end date) columns for just the selected grid row item(goal) . I am storing just the index of the selected items in the local variable. On click of the save button only they get saved to a rule input. so while the user chooses a particular goal, the corresponding remarks and start and end date should be enabled else disabled. attaching the snapshot and part of the code for reference. Please help.

Thank you

a!localVariables(
  local!tabs: {
    "Functional goals",
    "Job Knowledge Goals",
    "Productivity Goals",
    "Review"
  },
  local!isselected,
  local!activeTab: 1,
  local!FunctionalGoals: a!forEach(
    items: rule!MOB_fetchFunctionalGoals(),
    expression: {
      goal: fv!item.subtype,
      description: fv!item.description
    }
  ),
  local!selectedFunctionalGoals: tointeger({}),
  local!JobKnowledgeGoals: a!forEach(
    items: rule!MOB_fetchJobKnowledgeGoals(),
    expression: {
      goal: fv!item.subtype,
      description: fv!item.description
    }
  ),
  local!selectedJobKnowledgeGoals: tointeger({}),
  local!ProductivityGoals: a!forEach(
    items: rule!MOB_fetchProductivityGoals(),
    expression: {
      goal: fv!item.subtype,
      description: fv!item.description
    }
  ),
  local!selectedProductivityGoals: tointeger({}),
  {
    a!cardLayout(
      contents: {
        rule!MOB_employeeSelfServiceHeaderCard()
      },
      height: "AUTO",
      style: "NONE",
      marginBelow: "STANDARD"
    ),
	a!sectionLayout(
                label: "",
                contents: {
                  a!sectionLayout(
                    label: "",
                    contents: {
                      a!gridLayout(
                        label: "",
                        instructions: "Selected: " & local!selectedFunctionalGoals,
                        headerCells: {
                          a!gridLayoutHeaderCell(label: "Goals"),
                          a!gridLayoutHeaderCell(label: "Remarks"),
                          a!gridLayoutHeaderCell(label: "Start Date"),
                          a!gridLayoutHeaderCell(label: "End Date")
                        },
                        rows: a!forEach(
                          items: local!FunctionalGoals,
                          expression: a!gridRowLayout(
                            id: fv!index,
                            contents: {
                              a!textField(
                                /*instructions: fv!item.description,*/
                                value: fv!item.goal,
                                saveInto: { fv!item.goal },
                                readOnly: true()
                              ),
                              a!paragraphField(
                                value: fv!item.remarks,
                                saveInto: { fv!item.remarks },
                                /*disabled:if(a!isNotNullOrEmpty(wherecontains(fv!item.goal, {local!selectedFunctionalGoals})),false,true), */
                              ),
                              a!dateField(
                                value: fv!item.startDate,
                                saveInto: { fv!item.startDate },
                                validations: if( todate(fv!item.startDate)  < today() , "Start Date Should Be A Date After Today.", null),
                              ),
                              a!dateField(
                                value: fv!item.endDate,
                                saveInto: { fv!item.endDate },
                                validations: if( todate(fv!item.endDate)  < todate(fv!item.startDate) , "End Date Should Be After Start Date.", null),
                              )
                            }
                          )
                        ),
                        selectionValue: local!selectedFunctionalGoals,
                        /* Flatten the selected values so the result is easier to work with */
                        /* when the select/deselect all option is used in an editable grid  */
                        selectionSaveInto: a!save(
                          local!selectedFunctionalGoals,
                          a!flatten(save!value)
                        ),
                        selectable: true,
                        rowHeader: 1
                      )
                    }
                  )
                }
              ),
              a!buttonArrayLayout(
                buttons: {
                  a!buttonWidget(
                    label: "Save",
                    saveInto: {
                      a!save(
                        ri!selectedFunctionalGoals,
                        index(
                          local!FunctionalGoals,
                          local!selectedFunctionalGoals
                        )
                      )
                    },
                    style: "PRIMARY"
                  )
                },
                align: "CENTER"
              )