Wyświetlanie danych tabeli po kliknięciu [jquery] [php]

Witam,
Próbuję zrobić żeby każdy wynik z bazy danych był rozwijany oddzielnie i próbuję zrobić to w jquery, ale niestety działa to tylko dla jednego rekordu.

    var i = 0;    
    while(i < 10){   
        $(document).ready(function(){
            $(".tresc"+i).hide();
            $(".ps"+i).click(function(){
                $(".tresc"+i).toggle();
            });
        });
        i++;
    }

                    <table>
                        <form action="" method="post">        
                            <thead>
                            
                                <tr bgcolor="#356b98">
                                    <th>Firma</th>
                                    <input type="hidden" name="datew" value="<?php echo $_SESSION['idk']; ?>" />
                                </tr>

                            </thead>                  
                        </form>                
                            
                
                <?php
   
                $sql = "SELECT * FROM zlc, apt2 WHERE apt2.ID=zlc.idap ORDER BY apt2.Firma";

                $result = $pdo -> query($sql);

                ?>
  
                            <tbody>  
                    <?php $i = 1; while($row = $result->fetch()) { ?>
                            <tr class="<?php echo("x".$i%2); ?>">
                                <td class="<?php echo("ps".$i); ?>"><?php echo $row['Firma']; ?></td>
                            </tr>
                            <tr class="<?php echo("tresc".$i); ?>">
                                <td><?php echo"Adres: ".$row['Adres']; ?></td>
                            </tr>
                            <tr class="<?php echo("tresc".$i); ?>">    
                                <td><?php echo"Rejon: ".$row['Rejon']; ?></td>
                            </tr>
                            <tr class="<?php echo("tresc".$i); ?>">        
                                <td><?php echo"Zlecenie: ".$row['tresc']; ?></td>
                            </tr>
                            <tr class="<?php echo("tresc".$i); ?>">        
                                <td><?php 
                                    if($row['cz']==0)
                                        echo("Wykonano: Nie");
                                    else if($row['cz']==1)
                                        echo("Wykonano: Tak");
                                ?></td>
                            </tr>
                                
                            </tbody>      

                    <?php   $i++;    }  
                            
                        $result->closeCursor();
                        }
                        catch(PDOException $e){
                          echo 'Połączenie nie mogło zostać utworzone: ' . $e->getMessage();
                        }        
                            
                    ?>
                            
                        <input type="Submit" value="Edytuj" name="Submit" class="but3">    
                            
                    </table>

Trafiłeś na "quirk" związany z tym jak działają domknięcia w JSie - porównaj sobie podobny asynchroniczny kod:

var i = 0;
     
while (i < 10) { 
    setTimeout(function() {
        console.log(i);
    }, 100);

    i += 1;
}

Wyświetli on same 10-tki, ponieważ anonimowa funkcja przekazywana do setTimeout przechwytuje zmienną i, a nie jej wartość - a w momencie odpalania tamtych wszystkich funkcji (za 100ms), zmienna i będzie miała wartość 10 (ponieważ na tamten moment pętla będzie zakończona).

Istnieje kilka podejść do tego problemu - np.:

for (let i = 0; i < 10; ++i) {
     setTimeout(function() {
        console.log(i);
    }, 100);
}

Poczytaj sobie jak działają domknięcia w JSie, a zrozumiesz na czym polega trick :-)