Show multiple table rows on radio button click

Show multiple table rows on radio button click

Hi, how do I make multiple row showing per radio button check( When user click Other, two rows will be showing row for Country Dropdown and row for State Dropdown), it is not working when I do it like the code below a s I cannot use the same ID more than one time(country-2 used twice)

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>
  6. </title>
  7. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
  8. <script type="text/javascript">
  9. $(function () {
  10. $("[name=country]").change(function () {
  11. $('.hideRow').hide();
  12. $("#"+this.name+"-" +this.value).show('slow');
  13.                                  }).filter(':checked').change(); // edited!
  14. });
  15. </script>
  16. <style type="text/css">
  17. table.theTable {margin-left:10}
  18. </style> 
  19. </head>
  20. <body>
  21. <form action=".">
  22. <table width="600" class="theTable">
  23. <tr>
  24. <td width="200">
  25. Country
  26. </td>
  27. <td width="400">
  28. <label>
  29. <input type="radio" name="country" value="1" checked="checked" />
  30. USA
  31. </label>
  32. <label>
  33. <input type="radio" name="country" value="2" />
  34. Other
  35. </label>
  36. </td>
  37. </tr>
  38. <tr>
  39. <td width="200">
  40. </td>
  41. <td width="400">
  42. </td>
  43. </tr>
  44. <tr id="country-1" class="hideRow">
  45. <td width="200">
  46. City
  47. </td>
  48. <td width="400">
  49. <input type="text" name="city" />
  50. </td>
  51. </tr>
  52. <tr>
  53. <td width="200">
  54. </td>
  55. <td width="400">
  56. </td>
  57. </tr>
  58. <tr id="country-2" class="hideRow">
  59. <td width="200">
  60. Country</td>
  61. <td width="400">
  62. Dropdown boxes for country</td>
  63. </tr>
  64.                 <tr id="country-2" class="hideRow">
  65. <td width="200">State</td>
  66. <td width="400">
  67. Dropdown boxes for state</td>
  68. </tr>
  69. <tr>
  70. <td width="200">
  71. </td>
  72. <td width="400">
  73. </td>
  74. </tr>
  75. </table>
  76. <table>
  77. <tr>
  78. <td width="200">
  79. </td>
  80. <td width="400">
  81. <input type="submit" value="Submit" />
  82. </td>
  83. </tr>
  84. </table>
  85. </form>
  86. </body>
  87. </html>