Why this only works for the first div?

Question

I have this js function to show/hide a div id="xdata"

function xdataview(){
var estado = document.getElementById('xdata').style.visibility;

if (estado==="hidden"){
document.getElementById('xdata').style.visibility = "visible";
} else {
document.getElementById('xdata').style.visibility = "hidden";
}
}

and this inside a do while PHP loop

<div id="xdata" class="extradata">
<?php
   $saidas = $row_RSplano['TotalSaidas'];
   $entradas = $row_RSplano['TotalEntradas'];
   $saldo = $saidas - $entradas;
   echo "S:" . $saidas . " / " . "E:" . $entradas . "  >>>> SALDO:" . $saldo; 
?>
</div>

the problem is that this only work for the first div in my sql result. I not can't hide/show the second row div

Answer 1

One way to do it

divs=document.getElementsByTagName("DIV"); 
 for (theDiv in divs) { 
 if (divs[theDiv].className=="extradata") divs[theDiv].style.visibility="hidden"; 
 } 

thanks to you all