I'm trying to create 2 dynamic html tables using Javascript with data from html inputs. I was able to create the first table I wanted but I've been unable to create 2 different tables using different inputs on the same page. 

I tried changing the `addRow()` functions in the html and JS to have different names but this caused both tables to fail.

Any help would be appreciated. Here's the test code I've been using.

```
    <!DOCTYPE html>

<body onload="load()">
<div id="myform">

<table>
    <tr>
        <td>Name:</td>
        <td><input type="text" id="name"></td>
      </tr>
    <tr>
        <td>Age:</td>
        <td><input type="number" id="age">
            <input type="button" id="add" value="Add" onclick="addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
<br>
<table>
    <tr>
        <td>Height:</td>
        <td><input type="text" id="height"></td>
    </tr>
    <tr>
        <td>Width:</td>
        <td><input type="text" id="width">
            <input type="button" id="addDim" value="Add" onclick="addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</div>
<div id="mydata">

<table id="myTableData"  border="1" cellpadding="2">
    <tr>
        <td>&nbsp;</td>
        <td><b>Name</b></td>
        <td><b>Age</b></td>
    </tr>
</table>
&nbsp;

<table id="myTableData2"  border="1" cellpadding="2">
    <tr>
        <td>&nbsp;</td>
        <td><b>Height</b></td>
        <td><b>Width</b></td>
    </tr>
</table>

</body>
</html>

function addRow() {

    var myName = document.getElementById("name");
    var age = document.getElementById("age");
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= '<input type="button" value = "Delete"     onClick="deleteRow(this)">';
    row.insertCell(1).innerHTML= myName.value;
    row.insertCell(2).innerHTML= age.value;

    var width = document.getElementById("width");
    var height = document.getElementById("height");
    var table2 = document.getElementById("myTableData2");

    var rowCount2 = table2.rows.length;
    var row2 = table2.insertRow(rowCount2);

    row.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
    row.insertCell(1).innerHTML = width.value;
    row.insertCell(2).innerHTML = height.value;

}

function deleteRow(obj) {
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
}

function load() {
    console.log("Page load finished");
}

```