JSFiddle - React, Tailwind, and code Playground

HTML

Click the title
<br >
<br >
<table>
    <thead>
        <tr>
            <th>First Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="title">Title 1</td>
        </tr>
        <tr>
            <td class="detail">Detail 1</td>
        </tr>
        <tr>
            <td class="title">Title 2</td>
        </tr>
        <tr>
            <td class="detail">Detail 2</td>
        </tr>
        <tr>
            <td class="title">Title 3</td>
        </tr>
        <tr>
            <td class="detail">Detail 3</td>
        </tr>
        <tr>
            <td class="title">Title 4</td>
        </tr>
        <tr>
            <td class="detail">Detail 4</td>
        </tr>
        <tr>
            <td class="title">Title 5</td>
        </tr>
        <tr>
            <td class="detail">Detail 5</td>
        </tr>
    </tbody>
</table>

CSS

.detail{
    display:none;
    padding-left:20px;
}

JavaScript

$(document).ready(function () {
    $(".title").click(function () {
        $(this).parent().next().find('td').toggle();
    });
});