JQuery toggle selected Table row

Question

I'm Displaying a list of items. Each item has a description which will be displayed when the table row is clicked. If I remove the find(#planetDistance td) and just toggle, it will hide the @item name and then display the planet Distance, where I want both to be shown.

  <div class="rightCol">
    <table id="planetTable">
        @foreach (var item in Model)
    {
        <tr>
            <td><b>@item.Name</b></td>
            <td id="planetDistance" style="display:none">@item.ToString()</td>
        </tr>
    }
</table>
</div>
   @section scripts{
<script type="text/javascript">

     $(document).ready(function () {

        $('#planetTable tr').click(function () {
        var result = $(this).find("#planetDistance td");
        result.toggle();
        });
    });

Answer 1

id should be unique instead use class

<div class="rightCol">
    <table id="planetTable">
        @foreach (var item in Model)
    {
        <tr>
            <td><b>@item.Name</b></td>
            <td class="planetDistance" style="display:none">@item.ToString()</td>
        </tr>
    }
</table>
</div>
   @section scripts{
<script type="text/javascript">

     $(document).ready(function () {

        $('#planetTable tr').click(function () {
        var result = $(this).find("td.planetDistance");
        result.toggle();
        });
    });