Cannot add/delete

I have two grids, each within their own iframe. I'm trying to copy a row from one to the other.

So far, I have this.

Grid1.html/Grid2.html(Both are identicle, just in different frames)

var TestData = [
  ['4', 'Fonts', 'ThisOne', 'Need to add this package', '1.2.0']
  ];
  var TestHeader= ['ID', 'Type', 'Name', 'Description', 'Version'];
  var TestGrid= new AW.UI.Grid;
  TestGrid.setId("Test");
  TestGrid.setCellText(testData);
  TestGrid.setHeaderText(testHeader);
  TestGrid.setHeaderCount(1);
  TestGrid.setColumnCount(5);
  TestGrid.setRowCount(1);
  TestGrid.setColumnIndices([1, 2, 3, 4]);
  TestGrid.setSelectorVisible(true);
  TestGrid.setSelectorText(function(i){return this.getRowPosition(i)+1});
  document.write(TestGrid);

I also created these functions to be used:

function Add(GridId, Row)
{
    var RowCount = eval(GridId + 'Grid.getRowCount();'); 

    eval(GridId + 'Data.push(Row);'); 
    eval(GridId + 'Grid.addRow(RowCount);');
    eval(GridId + 'Grid.refresh();');
}

function Delete(GridId, All)
{
    var CurrentRow = GetGridRow(GridId);
    eval(GridId + 'Data.splice(CurrentRow);');
    eval(GridId + 'Grid.deleteRow(CurrentRow);');
}

function Copy(GridId, All)
{
    var CurrentRow = GetGridRow(GridId);
    return eval(GridId + 'Data[CurrentRow];');
}

function GetGridRow(GridId)
{  
    return eval(GridId + 'Grid.getCurrentRow();');
}

Here's the main page:
Main.html

<iframe id="FrameFrom" name="FrameFrom" src="Grid1.html" frameborder="0"></iframe>
    <div class="DualSelectButtons">
      <input type="button" name="AddButton" value="Add &gt;" onclick="DualAdd('Frame', 'Test');">
      <input type="button" name="RemoveButton" value="&lt; Remove" onclick="DualRemove('Frame', 'Test');">
    </div>
    <iframe id="FrameTo" name="FrameTo" src="Grid2.html" frameborder="0"></iframe>

Along with these functions:

function DualAdd(Id, SelectId)
{
    var DualSelect = GetDualToFrom(Id);
    
    var Data = DualSelect.From.Copy(SelectId);
    DualSelect.To.Add(SelectId, Data);
    DualSelect.From.Delete(SelectId);
}

function DualRemove(Id, SelectId)
{ 
    var DualSelect = GetDualToFrom(Id);
    
    var Data = DualSelect.To.Copy(SelectId);
    DualSelect.From.Add(SelectId, Data);
    DualSelect.To.Delete(SelectId);
}

function GetDualToFrom(Id)
{
    var DualSelect = new Object();
    DualSelect.From = GetFrameDocument(Id + 'From');
    DualSelect.To = GetFrameDocument(Id + 'To');
    
    return DualSelect;
}

function GetFrameDocument(FrameId)
{
    var Frame = document.getElementById(FrameId);
    var FrameContent;
    
    if (Frame.contentWindow)
        FrameContent = Frame.contentWindow;
    else
        FrameContent = Frame.contentDocument;
        
    return FrameContent;
}

Everything works fine when moving one row from one list to the other, but when trying to a row back, it just removes the row, but does not update the other grid.

Are there any suggestions?? Did I miss something?

Any help would be great, thanks!