Как получить динамический идентификатор с помощью javascript / jquery из цикла php

У меня есть две таблицы в базе данных, которые связаны друг с другом с помощью внешнего ключа «pid».

Я хочу показать таблицу проектов, и когда я щелкаю проект, чтобы показать некоторые детали из другой таблицы в базе данных (внешний ключ). Я пытаюсь работать с Ajax. Проблема в том, что одна часть таблицы находится в одном файле, а другая - в другом (обработка ajax). Я пытаюсь установить динамический идентификатор, но не знаю, как получить конкретный идентификатор с помощью javascript / jquery.

Вот код:

     <table class = "table table-condensed" style = "border-collapse:collapse;">
        <thead>
          <tr>
            <th></th>
            <th style = "font-style:italic;">NO</th>
            <th style = "font-style:italic;">STATUS</th>
            <th style = "font-style:italic;">PROJECT NAME ACTIVITIES</th>
            <th style = "font-style:italic;">OBJECTIVES/NOTES</th>
            <th style = "font-style:italic;">RESPONSIBLE</th>
            <th style = "font-style:italic;">START DATE</th>
            <th style = "font-style:italic;">COMPLETED DATE</th>
            <th style = "font-style:italic;">DURATION</th>
            <th style = "font-style:italic;">COMPLETED</th>
          </tr>
        </thead>
        <tbody>
          <?php $x = 0; foreach ($projects as $project){
            echo "<tr data-toggle=\"collapse\" data-target=\".demo$x\" class=\"accordion-toggle\">
              <td><button onclick='showTimeline()'>click</button></td>
              <td id=\"pid$x\">$project[pid]</td>
              <td>$project[status]</td>
              <td>$project[project_title]</td>
              <td>$project[notes]</td>
              <td>$project[responsible]</td>
              <td>$project[start_date]</td>
              <td>$project[completed_date]</td>
              <td>$project[duration]</td>
              <td>$project[completed]</td></tr>
              <div id='txtHint$x'></div>";
             $x++;}
            ?>
        </tbody>
    </table>

 function showTimeline(a,i) {
  var pid=document.getElementById("pid"+i).value;
  if (id == "") {
      document.getElementById("textHint"+i).innerHTML = "";
      return;
  } else {
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              document.getElementById("txtHint"+i).innerHTML = xmlhttp.responseText;
          }
      };
      alert(pid);
      xmlhttp.open("GET","ajax_test.php?q = "+pid,true);
      xmlhttp.send();
   }
 }