Show hide table rows onclick php javascript

Hi i have a page which displays FAQ's, these are generated from a database and a table row is created for each question and each answer, i want to be able to show/ hide each answer by clicking a button and calling javascript function

<script language="Javascript">

            function showanswer()
            {
                document.getElementById('answer').style.visibility="visible";
                document.getElementById('show').style.visibility = "hidden";
                document.getElementById('hide').style.visibility = "visible";  
            }
           
            function hideanswer()
            {
                document.getElementById('answer').style.visibility="hidden";
                document.getElementById('hide').style.visibility = "hidden";
                document.getElementById('show').style.visibility = "visible";    
            }
</script>

//mssql query to get questions and answers from database

<table><?
    While($row = mssql_fetch_object($result2))
    {
?>
        <tr>
        <td width="400"> <?echo  $row->Question ?> </td>
        <td>
        <input type="button" value="Show" id="show" onclick="showanswer()" >
        <input type="button" value="Hide" id="hide" style="visibility: hidden;" onclick="hideanswer()" >
        </td>
        </tr>

        <tr>
        <td style="visibility: hidden;" id="answer" colspan="2"><? echo  $row->Answer?></td></tr>
       
  <?}?>

This is working fine for the first answer, it can be displayed/ hidden using the buttons, but i cannot display/hide the rest of the answers

I think this is because each row being created for the answers inside the while loop has the same id, as does each show button and each hide button.
and so i think i need to create some sort of array and use this as the id, any help on how to do this and then reference the id in the javascript functions?

or any other suggestions on how i should do this?

thanks