Hide table problem

1

Hi
I’m trying to hide a table in side another table by clicking a button. It’s working fine. But I want to add another table and button like the same in the page. But the action for hiding is overlapping. What is going wroing with this. While click on the button the table under that button should be displayed and vise versa. This is the code.
thanks in advance…

<script language="javascript">
function ToggleRowDisplay( objTargetButton )
{
     try
     {
          // Variables
          var strDisplay = "block";
    
  // var objTableBody = document.getElementById( "objTargetButton" );
          var objTableBody = document.getElementById( "idTableBody" );
    
    
          var strButtonValue = "-";
     
          // Toggle Display
          if( objTargetButton.value == "-" )
          {
               // Hide
               strDisplay = "none";
               strButtonValue = "+";
          }
     
          // Toggle the table
          objTableBody.style.display = strDisplay;
          
   
          // Set button Value
          objTargetButton.value = strButtonValue;
     }
     catch( expError )
     {
          alert( expError.number + "   " + expError.description );
     }
}

</script>
<html>
<body>
     <table border="0" align="center" cellpadding="25" cellspacing="0">
       <tr>
         <td>
   
     <p><a href="#" onClick="ToggleRowDisplay( this )" value="+"><img src="click2.gif" width="100" height="29" border="0"></a></p>
     <table width="200" border="0">
           <tbody id="leftTable" style="display:none;">
             <tr>
               <td bgcolor="#996600">logo 1</td>
             </tr>
             <tr>
               <td bgcolor="#996600">logo 2 </td>
             </tr>
             <tr>
               <td bgcolor="#996600">logo 3 </td>
             </tr>
             <tr>
               <td bgcolor="#996600">logo 4 </td>
             </tr>
             <tr>
               <td bgcolor="#996600">logo 5 </td>
             </tr>
           </tbody>
         </table>           
   <p>         </td>
         <td valign="top"><p><a href="#" onClick="ToggleRowDisplay( this )" value="+"><img src="click.gif" width="100" height="29" border="0"></a></p>
           <table width="200" border="0">
             <tbody id="idTableBody" style="display:none;">
               <tr>
                 <td bgcolor="#666666">logo 1 </td>
               </tr>
               <tr>
                 <td bgcolor="#666666">logo 2</td>
               </tr>
               <tr>
                 <td bgcolor="#666666">logo 3 </td>
               </tr>
               <tr>
                 <td bgcolor="#666666">logo 4 </td>
               </tr>
               <tr>
                 <td bgcolor="#666666">logo 5 </td>
               </tr>
             </tbody>
           </table></td>
       </tr>
     </table>
</body>
</html>