I have a problem using jQuery for toggle. When i have the same class name for some tags, i would like to get the one event only on clicking the button.

Some of my code are below, and if i click a button named '1', it shows the rows of '2' and '5' since they have the same class name 'detail'. however, if i click '1', i would like to show only the row of '2'.

I am not willing to use different name since it is supposed to have lots of rows having toggle function. which means i need to have many names for each tag.

Please help me with some solution and advice, thank you.

---Script----

```
    <script>
            $(".button").click(function () {
                $(".detail").slideToggle("slow");
            });
            $(".button2").click(function () {
                $(".detail2").slideToggle("slow");
            });
    </script>

```

---HTML-----

```
   <table class="w850 table">
        <tr>
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="1" class="button"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="2" class="button2"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail2" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="3" />
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr>
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="4" class="button"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="5" class="button2"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail2" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="6" />
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
    </table>

```