Toggle button icon issue

[ainoy31]

I have a table and each row contains possibly another row underneath.  I have a plus icon next to each expandable rows.  If one clicks on the plus icon, it will change to a minus icon and display the hidden rows.  My issue is that it only works for the first row.  Meaning, if I click on the second row, the icon for the first row changes to a minus icon but I need the icon to change for the rows I click.

 

Here is my JS for this:

function toggle(id)
{
var state = document.getElementById(id).style.display;

if(state == 'block')
{
	document.getElementById(id).style.display = 'none';
	var obj = document.getElementById('plus');
	obj.src="../../images/pplus.gif";
}
else
{
	document.getElementById(id).style.display = 'block';
	var obj = document.getElementById('plus');
	obj.src="../../images/mminus.gif";
}
}

 

Here is the code for the table:

<tbody>
<tr>
<td><a style="text-decoration: none" href="#" onclick="toggle('<?=$stateid?>');"><img id="plus" src="../../images/pplus.gif" style="border-color:white"></a>     <a style="text-decoration:none" href="javascript:void(0);" onclick="window.open('xxx.php?s=<?=$stateid;?>', '', 'width=800, height=1000, scrollbars=no')" href='' class='CT'><img src="../../images/edit.png" style="border:white; font: 8px;" alt="Edit"></a></td>
</tr>
</tbody>

 

I hope this is clear enough on my issue.  Much appreciation. AM

[Ken2k7]

Does $stateid ever change? If not, then you have a xHTML error. You shouldn't have more than one unique ID on the same page. You should know that. Shame on you. Haha.