title: Only selecting last inserted row from database
body: <p>So I have a pop up box that shows when I click on the table row and on that box should be the values from that table row but instead is only showing the last inserted row from db.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;tbody&gt;
   &lt;?php
  $conn = mysqli_connect("localhost", "root", "", "fix_in_time");
  $result = mysqli_query($conn, "SELECT * FROM `ocorrencia` as o INNER JOIN 
  `insere_material` as im ON o.id = im.id");
  $num = 1;
  while($row = mysqli_fetch_assoc($result)):
  ?&gt;
  &lt;tr id="table_row_&lt;?php echo $num; ?&gt;" onclick="hide('table_row_&lt;?php echo 
  $num; ?&gt;'), window.location= '#bg'"&gt;
  &lt;td style="font-family: Arial; font-size: 17px;"&gt;&lt;?php echo $row['data']; ?&gt; 
  &lt;/td&gt;
  &lt;td style="font-family: Arial; font-size: 17px;"&gt;&lt;?php echo $row['sala']; ?&gt; 
  &lt;/td&gt;
  &lt;td style="font-family: Arial; font-size: 17px;"&gt;&lt;?php echo $row['tipo']; ?&gt; 
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;?php endwhile; ?&gt;
  &lt;script src="scripts/table.js"&gt;&lt;/script&gt;
  &lt;div id="bg"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;
  &lt;a href="" id="close"&gt;X&lt;/a&gt;
  &lt;p id="rcorners1"&gt;&lt;/p&gt;
  &lt;p id="Title1"&gt;Data&lt;/p&gt;
  &lt;p id="Title2"&gt;Sala&lt;/p&gt;
  &lt;p id="Title3"&gt;Tipo&lt;/p&gt;
  &lt;p id="Title4"&gt;Descrição&lt;/p&gt;
  &lt;?php
   $result1 = mysqli_query($conn, "SELECT * FROM `ocorrencia` as o INNER JOIN `insere_material` as im ON o.id = im.id");
   while ($row = mysqli_fetch_assoc($result1)): ?&gt;
  &lt;p class="data"&gt;&lt;?php echo $row['data']; ?&gt;&lt;/p&gt;
  &lt;p class="sala"&gt;&lt;?php echo $row['sala']; ?&gt;&lt;/p&gt;
  &lt;p class="tipo"&gt;&lt;?php echo $row['tipo']; ?&gt;&lt;/p&gt;
  &lt;textarea readonly id="descricao"&gt;&lt;?php echo $row['descricao'];?&gt;&lt;/textarea&gt;
  &lt;?php endwhile;?&gt;
  </code></pre>
  
  <p>the pop up click on table row is this:</p>
  
  <pre><code>&lt;tr id="table" onclick="hide(), window.location= '#bg'"&gt;
  &lt;td style="font-family: Arial; font-size: 17px;"&gt;&lt;? php echo $row['data']; ? 
  &gt;&lt;/td&gt;
  &lt;td style="font-family: Arial; font-size: 17px;"&gt;&lt;?php echo $row['sala']; ?&gt; 
  &lt;/td&gt;
  &lt;td style="font-family: Arial; font-size: 17px;"&gt;&lt;?php echo $row['tipo']; ?&gt; 
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>function hide(tableRow){
  var x = document.getElementById(tableRow);
  if(x.style.display === "none"){
  x.style.display = "block";
  }else{
  x.style.display = "none";
  }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/8ciOu.jpg" rel="nofollow noreferrer">db table 1</a></p>
  
  <p><a href="https://i.stack.imgur.com/tB2R0.jpg" rel="nofollow noreferrer">db table 2</a></p>