Dual Picklist with Editable Grid Error

As per my Requirement I need to use the Dual Picklist with Editable Grid in Interface instead with Dual Picklist with Checkbox Design Pattern.

So the issue here is

1.Currently i am having the 4 items in the available list

2. When i am selecting 1 & 4 the local variables is taking the respective data related to 1 & 4 and after clicking on the ADD SELECTED it moved to the Selected List local variable

3.Remaining items available 2 & 3 when i am selecting them it should consider as 2 &3 but instead it was consider as new iteration as 1 & 2

Now the issue here is when i am selecting 1,4 those needs to be added to selected list and after submitting these when i select 2,3 the items needs to consider as 2,3 instead of 1,2 and all needs to be append and display the data

Code:

a!localVariables(
local!availableDataIndex,
local!selectedDataIndex,
local!availableList: rule!example().data, (record type)
local!selectedList,
{
a!sectionLayout(
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!gridLayout(
headerCells: { "" },
rows: a!forEach(
local!availableList,
a!gridRowLayout(
id: fv!index,
contents: {
a!textField(
value: fv!item['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}DIL Users.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'],
readOnly: true()
)
}
)
),
selectable: true(),
selectionStyle: "ROW_HIGHLIGHT",
selectionValue: local!availableDataIndex,
selectionSaveInto:local!availableDataIndex,
validations: {}
),
},
height: "MEDIUM_PLUS",
marginBelow: "STANDARD"
)
},
width: "MEDIUM"
),
a!columnLayout(
contents: {
a!buttonArrayLayout(
buttons: {
a!buttonWidget(
label: "Add Selected",
icon: if(
a!isPageWidth("PHONE"),
"chevron-down",
"chevron-right"
),
saveInto: {
/* Add chosen available items to selected list */
a!save(
local!selectedList,
append(
local!selectedList,
index(
local!availableList,
wherecontains(
local!availableDataIndex,
local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{27db380a-2a73-451f-9a40-96a5c543624b}id']

),
{}
)
),
),
/* Remove from available list */
a!save(
local!availableList,
remove(
local!availableList,
wherecontains(
local!availableDataIndex,
local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{27db380a-2a73-451f-9a40-96a5c543624b}id']


)
)
),
/* Clear out choices */
a!save(local!availableDataIndex, null)
},
width: "FILL",
style: "SECONDARY",
disabled: or(
a!isNullOrEmpty(local!availableDataIndex),
count(local!availableList)=0
)
),
a!buttonWidget(
label: "Add All",
icon: "plus",
saveInto: {
/* Add all available items to selected list */
a!save(local!selectedList,append(local!selectedList,
local!availableList)),
/* Clear available list */
a!save(local!availableList, {}),
/* Clear out choices */
a!save(local!availableDataIndex, null)
},
width: "FILL",
style: "SECONDARY",
disabled: count(local!availableList)=0

)
},
align: "START",
marginBelow: "EVEN_MORE"
),
a!buttonArrayLayout(
buttons: {
a!buttonWidget(
label: "Remove Selected",
icon: if(
a!isPageWidth("PHONE"),
"chevron-up",
"chevron-left"
),
saveInto: {
/* Add chosen selected items to available list */
a!save(
local!availableList,
append(
local!availableList,
index(
local!selectedList,
wherecontains(
local!selectedDataIndex,
local!selectedList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{27db380a-2a73-451f-9a40-96a5c543624b}id']
),
{}DIL 
)
),
),
/* Remove from selected list */
a!save(
local!selectedList,
remove(
local!selectedList,
wherecontains(
local!selectedDataIndex,
local!selectedList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{27db380a-2a73-451f-9a40-96a5c543624b}id']
)
)
),
/* Clear out choices */
a!save(local!selectedDataIndex, null)
},
width: "FILL",
style: "SECONDARY",
disabled: or(
a!isNullOrEmpty(local!selectedDataIndex),
length(local!selectedList)=0
)
),
a!buttonWidget(
label: "Remove All",
icon: "times",
saveInto: {
/* Add all selected items to available list */
a!save(local!availableList,append(local!availableList,
local!selectedList)),
/* Clear selected list */
a!save(local!selectedList, {}),
/* Clear out choices */
a!save(local!selectedDataIndex, null)
},
width: "FILL",
style: "SECONDARY",
disabled: count(local!selectedList)=0
)
},
align: "START"
)
},
width: "NARROW"
),
a!columnLayout(
contents: {
a!cardLayout(
contents: {

a!gridLayout(
headerCells: { "" },
rows: a!forEach(
local!selectedList,
a!gridRowLayout(
id: fv!index,
contents: {
a!textField(
value: fv!item['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'],
readOnly: true()
)
}
)
),
selectable: true(),
selectionStyle: "ROW_HIGHLIGHT",
selectionValue: local!selectedDataIndex,
selectionSaveInto:a!save(local!selectedDataIndex,save!value),
emptyGridMessage: " ",
validations: {}
),

},
height: "MEDIUM_PLUS",
marginBelow: "STANDARD"
)
},
width: "MEDIUM"
),
a!columnLayout(contents: {})
},
alignVertical: "MIDDLE"
)
}
)
}
)