Создание динамической таблицы и передача заполненной информации в массив

Подскажите пожалуйста, как сделать таблицу (1 строка 2 колонки) и кнопка "Добавить строку" при нажатии на которую добавляется еще одна строка для заполнения.

<script type="text/javascript">
function addRow(id){
        var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
        var row = document.createElement("TR")
        var td1 = document.createElement("TD")
        td1.appendChild(document.createTextNode("<input name="data1">"))
        var td2 = document.createElement("TD")
        td2.appendChild (document.createTextNode("<input name="data2">"))
        row.appendChild(td1);
        row.appendChild(td2);
        tbody.appendChild(row);
    }
</script>


<table id="myTable" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td><input name="data1"></td><td><input name="data2"></td>
        </tr>
    </tbody>
</table>
<br>

<a href="javascript://" onclick="addRow('myTable');return false;">Добавить строку</a>

После заполнения информации в таблице, что бы она передавалась в виде массива:

$data = array(
array(
'data1' => 'Тест1',
'data2' => 'Тест2',
),
array(
'data1' => 'Тест3',
'data2' => 'Тест4',
),
);

Спасибо!