Html DIV ID defined with echo

I believe the Second Code goes inside the file include("thumbimg.php"); .

Code problems:

• At each loop you are repeating function display() {...} and in var elem = document.getElementById("disp2"); you are only calling the element with disp2 , regardless of the link you click.

• In the id of each element you have added spaces at the beginning and end, <div id=" <?php echo "disp" .$arrayclientes[$i]->id; ?> "> , spaces are considered valid characters for the ID, so if you call document.getElementById("disp2"); it will return NULL because it is looking for an ID no space

• You open the tag <h4> , then the tag e fecha primeiro e depois fecha a tag ', this is wrong:

  <h4><a onclick="display()"> Nome:<?php echo $arrayclientes[$i]->nome; ?></h4></a>
  

  The correct one would look like this:

  <h4><a onclick="display()">Nome:<?php echo $arrayclientes[$i]->nome; ?></a></h4>
  

You solve the problem by moving the function to an isolated place, outside the file thumbimg.php and passing a paramenter in the display() with the id, see what your code can be:

<script>
function display(id) {
    var elem = document.getElementById(id);
    alert(elem);
    if(elem.style.visibility == "hidden"){
        elem.style.visibility="";
    } else {
        elem.style.visibility="hidden";
    }
}
</script>

<div class="panel-body">
<?php
    class Clientes {
        public $id;
        public $nome;
        public $cpf;
        public $endereco;

        public function __construct($id,$nome,$cpf,$endereco) {
            $this->id = $id;
            $this->nome = $nome;
            $this->cpf = $cpf;
            $this->endereco = $endereco;
        }
    }

    $cliente1 = new Clientes("0","Bruno","550","rua protasio");
    $cliente2 = new Clientes("1","Thiago","4400", "rua barao");
    $cliente3 = new Clientes("2","Ana","650","rua nova");
    $cliente4 = new Clientes("3","Beatriz","840","rua velha");
    $cliente5 = new Clientes("4","Gustavo","960","rua brasil");
    $cliente6 = new Clientes("5","Alberto","123255","rua jovem");
    $cliente7 = new Clientes("6","Jose","466897","rua normal");
    $cliente8 = new Clientes("7","Andre","44699", "rua das petalas");
    $cliente9 = new Clientes("8","Vinicius","87750", "rua irmao");
    $cliente10 = new Clientes("9","Bruna","4890", "rua bolao magico");

    $arrayclientes = array($cliente1, $cliente2,$cliente3,$cliente4,$cliente5,$cliente6,$cliente7,
                            $cliente8,$cliente9,$cliente10);

    for ($i=0;$i<10;$i++) {
        $arrayclientes[$i]->id;
        $arrayclientes[$i]->nome;
        $arrayclientes[$i]->cpf;
        $arrayclientes[$i]->endereco;

        include("thumbimg.php");
    }
?>
</div>

and the second code:

<?php
echo 'disp', $arrayclientes[$i]->id;
?>
<div>
    <h4>
        <a onclick="display('<?php echo 'disp', $arrayclientes[$i]->id; ?>)">
            Nome: <?php echo $arrayclientes[$i]->nome; ?>
        </a>
    </h4>

    <div id="<?php echo 'disp', $arrayclientes[$i]->id; ?>">
        <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
        <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
    </div>
</div>

Remove the display function from the loop and change to receive the id by parameter.

<script>
function display(divId)
{
    var elem = document.getElementById(divId);
    alert(elem);
    if(elem.style.visibility == "hidden"){
        elem.style.visibility="";
    } else {
       elem.style.visibility="hidden";
    }
}
</script>

And within the loop, pass the ID to the onclick function.

<h4><a onclick="display('<?php echo "disp" .$i; ?>')"> Nome:<?php echo $arrayclientes[$i]->nome; ?></a></h4>
    <div id="<?php echo "disp" .$i; ?>">
    <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
    <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
    </div>
</div>

Look at these changes, it only works the DIV that got last value to "DIV 9";

<script>
function display()
{
var elem = document.getElementById("<?php echo"disp".$i;?>");
alert(elem);
if(elem.style.visibility == "hidden"){
    elem.style.visibility="";

} else {
    elem.style.visibility="hidden";
}

}

</script>
<?php
echo "disp".$i;
?>
<div>
<h4><a onclick="display()"> Nome:<?php echo $arrayclientes[$i]->nome; ?></a></h4>
    <div id="<?php echo "disp" .$i; ?>">
    <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
    <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
    </div>
</div>

I removed the ID in the attributes and etc.

I believe this should solve the problem:

<script>
function display(pos)
{
   var elem = document.getElementById("disp" + pos);
   alert(elem);
   if (elem.style.visibility == "hidden") {
      elem.style.visibility="";
   } else {
     elem.style.visibility="hidden";
   }
} 
</script>
<?php  for($i=0;$i<10;$i++):?>
    <?php
    echo "disp" . $arrayclientes[$i]->id;
    ?>
    <div>
      <h4>
        <a href="javascript:void(0);" onclick="display(<?php echo $arrayclientes[$i]->id;?>)"> Nome: <?php echo $arrayclientes[$i]->nome; ?></a>
     </h4>
     <div id="<?php echo "disp" .$arrayclientes[$i]->id; ?>">
        <h5>Cpf:<?php echo $arrayclientes[$i]->cpf; ?></h5>
        <p>Endereco: <?php echo $arrayclientes[$i]->endereco; ?></p>
     </div>
   </div>
<?php endfor; ?>