[Javascript] DHTML and table cells

[Bill Marriott]

Hi Everyone,

I want to design a form (ie 5.5) ( for maintaining parent / children
records) that includes a select element and text element in one row of a
table.
When the user completes the row I want DHTML to create another row, the same
as the first for the next child record.
The code below works the first time but the second time it appends 2 records
and the third it appends 3 and so on.
Actually I don't know why the code works at all because .getElementById
should reference the table and not the row.

Any help would be appreciated.

Bill
******************************************
JAVASCRIPT
var tableElement = document.getElementById("row");
var lastRow = tableElement.lastChild;
var newRow = tableElement.cloneNode(lastRow
tableElement.appendChild(newRow);

HTML
<table border="1" width="100%" ID="historyTable">
     <tr>
       <th width="50%" align="center"><b>Crop</b></th>
       <th width="25%" align="center"><b>Year</b></th>
       <th width="25%" align="center"><b>Yield</b></th>
     </tr>
           <tr ID="row">
              <td width="50%">
               <p align="center"><select size="1" name="D1">
                 <option>Select Crop</option>
                 <option>Barley Irrigated</option>
                 <option>Canola Dryland</option>
                 </select></p>
              </td>
              <td width="25%">
               <p align="center"><input type="text" name="T3" size="8"></p>
              </td>
              <td width="25%">
               <p align="center"><input type="text" name="T4" size="8"
onblur="askNewHistory()"></p>
              </td>
            </tr>
   </table>