Wyświetlanie z bazy danych i odwoływanie się do konkretnego wiersza.

Witam.
Poniższy kod pobiera mi z bazy dane o owocach po czym rysuje tabelę z danymi rodzaj i ilosc. Do tabeli muszę dodać jeszcze jeden który będzie formatowany java scriptem do display:inline.

To co opisałem wyżej działa tylko do pewnego momentu. Otóż dla każdego wiersza z bazy rysuje tabele z 3 wierszami, 2 pierwsze tak jak w kodzie niżej i 3 z buttonem 'Rozwiń' który rozwija mi czwarty wiersz z atrybutami zior i przeznaczenie W przypadku jednego wiersza w bazie, nie ma problemu. Rodzi się on natomiast w przypadku gdy w bazie jest danych o 2 lub więcej owocach. Czy ktoś mógłby mi pomóc jak to usprawnić?

$owoce = mysql_query("SELECT `rodzaj`, `ilosc`, `zbior`, `przeznaczenie` FROM `owoce`")
or die('Błąd zapytania');

if(mysql_num_rows($owoce) > 0) {

    while($wiersz = mysql_fetch_assoc($owoce)) {

echo "<table cellpadding=\"2\" border=1>";
        echo "<tr >";
		
		echo "<td width=200 >Rodzaj owoców</td>";
                echo "<td width=200>Ilość</td>";
        
        echo "</tr>";
		


         echo "<tr >";
		
		echo "<td width=200 >.$wiersz['rodzaj'].</td>";
                echo "<td width=200>.$wiersz['ilosc'].</td>";
        
        echo "</tr>";
		
		
    }
    echo "</table>";
}  

<tr> i display: inline;?
A nie table-row?

I ogólnie dziwne pytanie. Nie rozumiesz zasad działania pętli?
Wywal wstawianie <table> i nagłówków tabeli poza while (przed while), oraz zamknięcie </table> już za while.

Sprecyzuję pytanie. Otóż mam zrobić coś takiego:

 
<script type="text/javascript" language="javascript">
function wiecej()
{       pierwszy=document.getElementById('first')
        drugi=document.getElementById('second')
        if(pierwszy.style.display == 'table-row'){
        pierwszy.style.display='none'
        drugi.style.display='table-row'
        }else{
		pierwszy.style.display='table-row'
        drugi.style.display='none'
		}}	
</script>
<?php

$owoce = mysql_query("SELECT `rodzaj`, `ilosc`, `zbior`, `przeznaczenie` FROM `owoce`")
or die('Błąd zapytania');
 
if(mysql_num_rows($owoce) > 0) {
 echo "<table cellpadding=\"2\" border=1>";
    while($wiersz = mysql_fetch_assoc($owoce)) {
 

        echo "<tr >";
 
                echo "<td width=200>Rodzaj owoców</td>";
                echo "<td width=200>Ilość</td>";
 
        echo "</tr>";
 
         echo "<tr >";
 
                echo "<td width=200 >".$wiersz['rodzaj']."</td>";
                echo "<td width=200>".$wiersz['ilosc']."</td>";
 
        echo "</tr>";
       
	   echo "<tr id=\"first\" style=\"display:table-row\">";
		
			echo "<td><a href=\"javascript: void(null);\" onclick=\"wiecej();\">Rozwiń/Zwiń</a>";
		
		echo "</tr>";
	   
	    echo "<tr id=\"second\" style=\"none\">";
		
			echo "<td>".$wiersz['zbior']."</td>";
			echo "<td>".$wiersz['przeznaczenie']."</td>";
		
		echo "</tr>";
 
    }
    echo "</table>";
}  
?>

Niestety link "Rozwiń/Zwiń" działa tylko dla pierwszego wiersza w tabeli. Gdy w tabeli jest jeden wiersz nie ma problemu, jednak gdy pojawi się np 10 owoców to każdy z linków "Rozwiń/Zwiń" działa dla pierwszego gdyż js odwołuje się do id.

Edit:
Oczywiście w tr o id=second ma być style="display:none"

No bo ID nie mogą być duplikowane. ID jest UNIKALNE i samo wrzucenie w pętlę "while" kodu produkującego element html ze stałym id jest nielogiczne.

ID Ci są niepotrzebne w ogóle. W onclick przekaż this jako pierwszy parametr.
Potem używając (dwukrotnie) parentNode wybierzesz element <tr> (Twoje pierwszy), na nim użyjesz znowu nextSibling i już masz wybrany następny tr (Twoje drugi). Potem robisz to co aktualnie.

Generalnie poczytaj sobie te stronki o DOM, większość osób zna tylko getElementById, albo posługuje się jQuery, a przecież natywnych funkcji nie brakuje, tylko nikt ich nie zna.