I added a jquery function to add a <tr> dynamically at the end of my table. It worked fine until I added table headers to my table. After I did this, the function started adding 2 trs at a time to the table. What happened?

HTML:

<table id="table" border="0">
<th>Col 1</th><th>Col2</th><th>col3</th>
<tbody>
<tr>
    <td>
        <select>
            <option value ="one">one</option>
            <option value="two">two</option>
        </select>
    </td>
    <td>
        <input type="text"></input>
    </td>
    <td>
        <input type="text"></input>
    </td>
</tr>
</tbody>
</table>

JQuery code:

$(function(){
  $('a#add').click(function(){
    $('#table > tbody').append('<tr><td><select><option value ="one">one</option><option value="two">two</option></select></td><td><input type="text"></input></td><td><input type="text"></input></td></tr>');  
  });