In my code I have n number of divs generated dynamically in the left part, where they take as id the name of a columan called user in my database, in my database I have id, user, and in the right side also dynamically generate the divs with the same id, where the information is displayed, but I have an error, by pressing the div with the id="test1" it becomes visible its homologous (the div red color), but if I press the id="test2" and I want to show the id="test1", it is not shown, it keeps showing me the div of the last selected element.
the id="test1" if I click it, it shows me the red color with the same id and so on with the others.
Without using jquery please and thank you
php, html and js code
<?php
include "Conexion.php";
session_start();
$nombre = $_SESSION['user'];
$consulta = "SELECT * FROM tabla WHERE usuario != '$nombre'";
$ejecutar = $conexion->query($consulta);
while($fila = $ejecutar->fetch_array()):
?>
<!DOCTYPE html>
<html>
<head>
</head>
<script type="text/javascript">
function Ajax(usuario)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById(usuario).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST","cc.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("usuario="+usuario);
}
</script>
<body>
<div id="<?php echo $fila['nombre']; ?>" class="chatp2" onclick="Ajax('<?php echo $fila['usuario']; ?>'););">
<span class="conf" id="<?php echo $fila['usuario']; ?>" style="background-color: white;"> <?php echo $fila['usuario']; ?></span><br>
</div>
</body>
</html>
It's like a chat