Creazione dinamica tabelle

[matala]

Avrei bisogno di creare due tabelle che prendono dei valori da un database.
Nella prima tabella riporto i dettagli della tabella Gruppi.
Nella seconda tabella vorrei riuscire a visualizzare, al click su una riga della prima tabella, i sottogruppi associati al gruppo selezionato.

Sono riuscito a popolare la prima tabella e ho creato, trovando spunto su internet, uno script che al click su una riga della prima tabella mi restituisce il valore del gruppo su cui ho cliccato.

Non riesco a capire come posso passare tale valore alla query della seconda tabella.

Riporto qui sotto il mio tentativo incompleto:

<div class="uk-grid">
    <!-- Tabella Gruppi da db -->
    <div class="uk-width-1-2" id="Gruppi" > 
        <div class="uk-panel uk-panel-box">
            <h2>Gruppi</h2>
            <?php
            // Connessione al db
            $con = mysqli_connect('localhost','root','','conti');
            if (!$con) {
                die('Could not connect: ' . mysqli_error($con));
            }

            mysqli_select_db($con,"ajax_demo");
            $sql="SELECT Gruppo, Tipo FROM gruppi";
            $result = mysqli_query($con,$sql);

            echo "<section class=\"wrapper style5\">
            <table id=\"table_gruppi\" class=\"uk-table uk-table-hover uk-table-striped uk-table-condensed\" > <thead> <tr>
            <th>Gruppo</th>
            <th>Entrata</th>
            </tr>
            </thead>
            <tbody>";

            while($row = mysqli_fetch_array($result)) {
                echo "<tr>";
                echo "<td>" . $row['Gruppo'] . "</td>";
                // Checkbox al posto di 1 o 0
                if ($row["Tipo"]=='1') {
                    echo "<td> <input checked=\"\" type=\"checkbox\" disabled> </input> </td>";
                } elseif ($row["Tipo"]=='0') {
                    echo "<td> <input type=\"checkbox\" disabled> </input> </td>";
                }
                echo "</tr>";
            }
            echo "</table></section>";
            mysqli_close($con);
            ?>
        </div>
    </div>
    <!-- Tabella Sottogruppi che si dovrebbe popolare al click di una riga sulla tabella Gruppi -->
    <div class="uk-width-1-2"><div class="uk-panel uk-panel-box"><h2>Sottogruppi</h2>
    <p id="click-response"></p>
    <?php
            // Connessione al db
            $con = mysqli_connect('localhost','root','','conti');
            if (!$con) {
                die('Could not connect: ' . mysqli_error($con));
            }

            mysqli_select_db($con,"ajax_demo");
            $sql="SELECT Sottogruppo FROM sottogruppi WHERE Gruppo = ";
            $result = mysqli_query($con,$sql);

            echo "<section class=\"wrapper style5\">
            <table id=\"table_gruppi\" class=\"uk-table uk-table-hover uk-table-striped uk-table-condensed\" > <thead> <tr>
            <th>Sottogruppo</th>
            </tr>
            </thead>
            <tbody>";

            while($row = mysqli_fetch_array($result)) {
                echo "<tr>";
                echo "<td>" . $row['Sottogruppo'] . "</td>";
                echo "</tr>";
            }
            echo "</table></section>";
            mysqli_close($con);
            ?>
    
    </div></div>
</div>

        <script type="text/javascript">
            function onRowClick(tableId, callback) {
                var table = document.getElementById(tableId),
                    rows = table.getElementsByTagName("tr"),
                    i;
                for (i = 0; i < rows.length; i++) {
                    table.rows[i].onclick = function (row) {
                        return function () {
                            callback(row);
                        };
                    }(table.rows[i]);
                }
            };

            onRowClick("table_gruppi", function (row){
                var value = row.getElementsByTagName("td")[0].innerHTML;
                document.getElementById('click-response').innerHTML = value + " clicked!";
                console.log("value>>", value);
                var sql_sottogruppi = "SELECT Sottogruppo FROM sottogruppi WHERE Gruppo = '" + value + "'"
            });
        </script>

Avrei bisogno di un po' di aiuto e magari di qualche esempio analogo da studiarmi.

Grazie