不分离在同一弹出框中显示全部的数据库值

Question

So, I have a pop up box that shows when I click on the table row. On that box should be the values from that table row, but, instead, it is showing all inserted rows simultaneously on the same pop up box.

this is what happens when I open the box

this is the table

Here is the html code that opens the pop up box:

<tr id="table_row_<?php echo $num; ?>" onclick="hide('table_row_<?php echo 
$num; ?>'), window.location= '#bg'">
<td style="font-family: Arial; font-size: 17px;"><?php echo $row['data']; ?> 
</td>
<td style="font-family: Arial; font-size: 17px;"><?php echo $row['sala']; ?> 
</td>
<td style="font-family: Arial; font-size: 17px;"><?php echo $row['tipo']; ?> 
</td>
</tr>
<script src="scripts/table.js"></script>
<div id="bg"></div>
<div class="box">
<?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)): ?>
<p class="data"><?php echo $row['data']; ?></p>
<p class="sala"><?php echo $row['sala']; ?></p>
<p class="tipo"><?php echo $row['tipo']; ?></p>
<textarea readonly id="descricao"><?php echo $row['descricao'];?></textarea>
<?php endwhile;?>

JS:

function hide(tableRow){
var x = document.getElementById(tableRow);
if(x.style.display === "none"){
x.style.display = "block";
}else{
x.style.display = "none";
}
}

I am sure that I have to use javascript to separate the values, but I am still learning and don't know how to do it.

this is the box css:

#rcorners1 {
border-radius: 20px;
background: #f2f2f2;
margin-top: -200px;
margin-left: -90px;
padding: 50px;
width: 800px;
height: 400px; 
}

this is the targets that bring the box down:

#bg:target{
display: block;
}

#bg:target~.sala{
top:290px;
transition: all .3s;
transition-delay: .2s;
}

#bg:target~.box{
top:290px;
transition: all .3s;
transition-delay: .2s;
}

#bg:target~#close{
top:20px;
transition: all .3s;
transition-delay: .2s;
}

and the values:

.data{
z-index: 0;
margin-left: 0px;
margin-top: -450px; 
position: absolute;
text-align: center;
font-family: Arial;
font-size: 23px;
}

.sala{
margin-left: 230px;
margin-top: -450px; 
position: absolute;
text-align: center;
font-family: Arial;
font-size: 23px;
}

.tipo{
margin-left: 380px;
margin-top: -450px; 
position: absolute;
text-align: center;
font-family: Arial;
font-size: 23px;
}

#descricao{
width: 600px; 
height: 180px;
resize: none;
margin-left: 0px;
margin-top: -280px; 
position: absolute;
font-family: Arial;
font-size: 18px;
}