Using PHP to change the information displayed inside a label - php

Question

I have the following code that is supposed to be a list of "facilities" and I made a div acting as a popUp that contain information that should change depending on the Lab I click info, I already made the popUp appear and dissapear playing with adding a hide and show class to it using Js.
But I don´t really know how should I write that each li element has to retrive information from a database I made in wamp for practice purposes, should I use a label? Or perhaps create a table instead of a list?
In short I need that when I click Lab 1 the popUp says Name: Lab1, if the clicks Lab 2, then Lab2 and so on. The code I was going to use in PHP is below as well.
HTML
<div class="box">
<p>Lab #1</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #3</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="popUp1 hide" id="popUpCorrecto1">
<div class="estiloPopUp">
<span>Información de laboratorio</span>
<span value="Cerrar" id="btnCerrar">x</span>
</div>
<ul>
<li>Nombre: Lab #1</li>
<li>Carrera: Desarrollo</li>
<li>Capacidad: 20</li>
<li>Ubicación:Abajo</li>
<li><a href='horarios.html'>Ver horarios</a></li>
</ul>
<input type = "button" value = "Eliminar" id = "btnEliminar" onclick="window.location='labEliminado.html';" />
<input type = "button" value = "Modificar" id = "btnModificar" onclick="window.location='modificarLab.html';" />
</div>
PHP
function displayLab(){
$query = "SELECT bk.idLab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs";
$result = do_query($query);
return $result;
}
function displayBooks(){
$books = getBooks();
while($row = mysql_fetch_assoc($books)){
echo '<tr>' .
'<td>' . $row['idLab'] . '</td>' .
'<td>' . $row['carrera'] . '</td>' .
'<td>' . $row['capacidad'] . '</td>' .
'<td>' . $row['ubicación'] . '</td>' .
'</tr>';
}
}
Gonna add the box CSS just in case:
.box {
color: #ecf0f1;
background-color: #34495e;
display: inline-block;
padding: 2px;
width: 75px;
border: 2px solid black;
margin: 3px;
}
.box:hover{
border:2px solid white;
}
JS for PopUp
var elementoVerInfo = document.getElementById('lnkInfo'),
elementoBotonCerrar = document.getElementById('btnCerrar');
elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrecto1');
});
elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrecto1');
});
function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}
function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}
That is if I decide to use a table...and if the code runs >.>
Anyway thanks a lot in advance
Best Wishes

Answer 1

If anyone else wants to do something similar I came with a solution:
function displayLabs(){
$labs = getLabs();
while($row = mysql_fetch_assoc($labs)){
echo '<ul>' .
'<li>"Nombre: "'. $row['idlab'] . '</li>' .
'<li>"Capacidad: "'. $row['capacidad'] . '</li' .
'<li>"Carrera: "'. $row['carrera'] . '</li>' .
'<li>"Ubicación: "'. $row['ubicacion'] . '</li>' .
'</ul>';
}
}