[JavaScript][AJAX][PHP] Tabela z Danymi z BAzy MySQL - reakcja na kliknięcie jQuery Opcje

[scorpion10]

Pobrane z Bazy dane trafiają do Tabeli umieszczonej w Div a na każdy wiersz tabeli <TR> ustawiona jest reakcja na klikniecie i obsługa tego klliknięcia w jQuery/Ajax która ma wyświetlić dane z klikniętego wiersza tabeli w <DIV> obok.
I niby to działa ale tylko na pierwszy wiersz tabeli i jeden rekord, zawsze pierwszy pobrany w pętli w PHP. Jak zrobić by jQuery / Ajax przekazywał dane po kliknięciu w każdy wiersz tabeli a nie tylko pierwszy ? żeby jakoś zapamiętał ID pobranych rekordów z bazy, z góry dziękuje za pomoc.

Do obsługi tego użyłem trzech plików ::


Pobranie danych z bazy do formularza

Kod

<div class="przekazanie_sr">

    <?php

    $pracownicy = "SELECT P.nazwisko,P.imie,L.pokoj,S.stanowisko,U.miejscowosc,P.ID_pracownik
                    FROM tb_workers P
                    INNER JOIN sl_lokalizacja L ON P.ID_lokalizacja = L.ID_lokalizacja
                    INNER JOIN sl_stanowisko S ON P.ID_stanowisko = S.ID_stanowisko
                    LEFT JOIN sl_urzad U ON U.ID_urzad = L.ID_urzad ORDER BY 2";

    $wynikprac = $db->query($pracownicy);

    ?>

        <table id='przekazanie'>

        <form method="POST">
    
    <?php

  

    while($row=mysqli_fetch_array($wynikprac)){
  
        $im = $row['imie'];
        $naz = $row['nazwisko'];
        $idd = $row['ID_pracownik'];
        $rekord = $row['idprac'];

echo "<tr id='osobnik'>";

if($row['nazwisko']){

echo "<td><font size='2'>".$row['nazwisko']."</font></td>";
}  

else
{  
echo "<td><font size='1' color='red'><i>Brak Kategorii !</i></font></td>";
}
echo "<td><font size='3'>".$row['imie']."</font></td>";
    echo "<td><font size='2'>".$row['pokoj']."</font></td>";
        echo "<td><font size='2'>".$row['miejscowosc']."</font></td>";
            echo "<td><font size='2'>".$row['stanowisko']."</font></td> ";
  
            echo '<script src="scripts/osoba.js"></script>';

?>

            <input type="hidden" id="name" value=<?php echo $im ?>>
            <input type="hidden" id="surname" value=<?php echo $naz ?>>
            <input type="hidden" id="idf" value=<?php echo $idd ?>>
      
<?php

}

?>


</form>

  </table>

  </div>

obsługa w jQuery/Ajax

Kod

$(document).ready(function(){
    $("#osobnik").click(function(){
var imiee = $('#name').val()
var nazwiskoo = $('#surname').val()
var ido = $('#idf').val();

var ajax = $.ajax ({
url:'ajax.php',
type:'POST',
data:{imie:imiee,nazwisko:nazwiskoo,idx:ido}

});

ajax.done(function(msg){
$('#komu').html(msg);
console.log("SUCESS !");
console.log(imiee);
console.log(nazwiskoo);
console.log(ido);
});

ajax.fail(function(){
console.log('BŁĄD  !!!!');
});

ajax.always(function(){
console.log('ZAMYKAM POŁACZENIE');
});

});
});

Odebranie danych z Ajax przez PHP

Kod

<?php
$a = ($_POST['imie']);
$b = ($_POST['nazwisko']);
$c = ($_POST['idx']);
echo $a;
echo $b;
echo $c;
?>

<div id="Dane" style="border:solid 1px black"></div>