Две таблицы Dynami c нуждаются в помощи во взаимодействии между ними

Question

Я новичок и все еще учусь веб-разработке. Я застрял с этой проблемой и не мог найти какие-либо решения в Интернете.

Вот оно:

У меня есть 2 динамические c таблицы, таблица 1 и таблица 2, где оба тд теги заполнены теми же данными из базы данных ...

таблица 2 скрыта ...

Я хочу, чтобы каждый раз, когда я щелкаю строку таблицы из таблицы 1, она отображала ту же строку из таблицы 2.

Заранее спасибо

Вот мой код таблицы:

<table class="table col-md-4 mx-auto float-left table-bordered">
    <thead>
    <tr class="bg-secondary">
        <th class="th-width1">ID</th>
        <th class="th-width2">Product Name</th>
        <th class="no-border-right pr-0 mr-0">Pr</th>
        <th class="th-width3 no-border-left pl-0 ml-0">ice</th>
        <th class="th-width3">Class</th>
        <th class="th-width4"></th>
    </tr>
    </thead>
    <tbody>
        <?php
            $servername = "localhost";
            $username = "root";
            $password = "usbw";
            $dbname = "sugarhills";

            // Create connection
            $conn = new mysqli($servername, $username, $password, $dbname);
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            }

            $select = "SELECT id, name, price, class FROM products";
            $result = $conn->query($select);

            if ($result->num_rows > 0) {
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    echo "<tr class='clickrow'>
                        <td>".$row["id"]."</td>
                        <td>".$row["name"]."</td>
                        <td class='no-border-right pr-0'>&#8369;</td>
                        <td class='pl-0 no-border-left'>".$row["price"]."</td>
                        <td>".$row["class"]."</td>
                        <td>
                        <button type='button' class='btn btn-success editbtn btn-sm pr-3'><i 
    class='fas fa-edit'></i>Edit</button>
                        <button type='button' id='".$row["id"]."' class='btn btn-danger deletebtn 
    btn-sm pr-1'><span><i class='fas fa-trash-alt'></i></span>Delete</button>
                        </td>
                    </tr>";
                }
            } else {
                echo "<tr>
                    <td colspan='4' class='text-center'>Product List Empty</td>
                </tr>";
            }
            $conn->close();
        ?>
    </tbody>
</table>