Having trouble with jQuery toggle row to work right

The results appear in a table and each row when clicked on shows detailed information.  I'm trying to use the jQuery toggle so it can open the detail information under the persons name.

The jQuery code I have is this...

<script>

$(document).ready(function() {

     $("#title").click(function() {

     $("#detail").toggle();

});

});

</script>

Then my cfoutput table is this...

<table>

<thead>

<tr><th>First Name</th></tr>
</thead>

<tbody>

<cfoutput query="getRecords">

<tr>

<td id="title">#getRecords.firstN#</td>

</tr>

<tr>

<td id="detail"><cfdiv bind="url:details.cfm?firstN=#firstN#" /></td>

</tr>

</cfoutput>

</tbody>

</table>

Now what happens with that is all the detail records show up with the name and only the first row can toggle.  Everything else doesn't do anything.  Also is there a way to have the toggle show as closed first?  Thank you so much for any help with this.