Исчезновение результатов SQL с помощью jQuery

Question

У меня есть php-файл, в который я извлекаю элементы SQL из моей базы данных. Моя цель состоит в том, чтобы для каждой строки данных div 'moredetails' появлялось при нажатии (по одному за раз). Тем не менее, текущий сценарий, который я использую, только исчезает в первом результате. Поэтому любая строка после этого не несет функции.

Вот мой код:

<?php
    session_start();
    // If the user is not logged in redirect to the login page...
    if (!isset($_SESSION['loggedin'])) {
        header('Location: index.html');
        exit();
    }   

    $userLoggedIn = $_SESSION['name'];

    $con=new mysqli("IPHERE","USERNAMEHERE","PASSWORDHERE","DATABASEHERE");
    if($con->connect_error){
        echo 'Connection Failed: '.$con->connect_error;
        }else{
            $sql="select * from mytable WHERE customer LIKE'%$userLoggedIn%'";

            $res=$con->query($sql);

            while($row=$res->fetch_assoc()){
            echo '<table width="50%" class="tabledetails"><tr><td width="20%">Date: </td><td width="20%">Order: </td><td width="20%">Amount:  </td>
            <tr><td>'.$row["date"], '</td><td>'.$row["num"],'</td><td>'.$row["total"],'</td></tr>
            <tr><td><div class="hidden moredetails">'.$row["description"],'</div></td></tr>


            </table>'

            ;   
            echo "<br><br>";


            }       

        }
?>


<script>
$(document).ready(function(){
  $(this).on("click", function(){
       $(".tabledetails").click(function(){
    $(".moredetails").fadeIn("slow");
       });
  });
});
</script>

Кто-нибудь знает, возможно, мне нужно переделать здесь jQuery с какой-то функцией .each или я пропустил шаг в сторону SQL / php?

Обратите внимание, что класс "скрытый" находится в файле CSS, который говорит: display:none

Answer 1

Как я уже говорил в комментарии выше, используйте классы: https://jsfiddle.net/wwWaldi/3xy4woq7/54/

$('.tabledetails').on('click', function() {
  $(this).find('.moredetails').toggle('slow');
});