hey, I have one table in which i have two radio buttons - group & early birds

 

  <table>

    <tr>

      <td>

        <div wix-model="variedpricing" wix-ctrl="Radio" id="vPrice">

          <table>

            <tr>

              <td>

                <div data-radio-value="group" id="radioGroup">Goup</div>

               </td>

               <td>

                 <div data-radio-value="earlybird" id="radioEarlyBird">Early Bird</div>

                </td>

               </tr>

              </table>

            </div>

           </td>

          </tr>

         </table>

I want to show/hide the next two tables according to selected radio button

here i have another two tables

<table id="dataTable" class="category">

 <tr>

  <td>

   <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Premium category'}"></div>

   </td>

   <td>

   <div wix-model="seats" wix-ctrl="Input" wix-options="{placeholder: 'No. of Seats'}" id="noSeatOne"></div>

    </td>

     <td>

     <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Currency'}" id="currencyOne"></div>

      </td>

       <td>

        <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Cost'}" id="costOne"></div>

        </td>

       </tr>

       <tr>

         <td>

           <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Regular category'}"></div>

          </td>

          <td>

            <div wix-model="seats" wix-ctrl="Input" wix-options="{placeholder: 'No of Seats'}" id="noSeatTwo"></div>

          </td>

          <td>

            <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Currency'}" id="currencyTwo"></div>

          </td>

           <td>

            <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Cost'}" id="costTwo"></div>

            </td>

           </tr>

           <tr>

             <td colspan="4">

               <button class="uilib-btn btn-black-text" onclick="addRow('dataTable')">Add Category</button>

              </td>

             </tr>

          </table>

    <table id="earlyBirdGroup" class="earlybirdc">

 <tr>

   <td>

     <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'EarlyBird Seats'}"></div>

    </td>

     <td>

       <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Currency'}" id="ebcurrencyOne"></div>

     </td>

     <td>

       <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Cost'}" id="ebcostOne"></div>

     </td>

   </tr>

   <tr>

     <td>

       <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Regular Seats'}"></div>

      </td>

      <td>

        <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Currency'}" id="ebcurrencyTwo"></div>

      </td>

      <td>

        <div wix-model="categoryName" wix-ctrl="Input" wix-options="{placeholder:'Cost'}" id="ebcostTwo"></div>

      </td>

 </tr>

</table> 

here is the main table where i put three radio buttons of payment category Free, Fixed, Varied

                          <table class="addVenuet">

                    <tr>

                        <td rowspan="3">

                                <div wix-model="pricing" wix-ctrl="Radio" id="ePrice">

                                    <div data-radio-value="free" id="radioFree">Free</div>

                                    <div data-radio-value="fixed" id="radioFixed">Fixed</div>

                                    <div data-radio-value="varied" id="radioVaried" >Varied Price</div></div>

                                 </td>

                    </tr>

                    <tr>

                                <td colspan="2">Price</td>

                                <td>No. Of Seats</td>

                    </tr>

                    <tr>

                              <td colspan="2"><div wix-model="fixedprice" wix-ctrl="Input" wix-option="{placeholder:'Enter The Price'}"></div></td>

                              <td><div wix-model="noofseats" wix-ctrl="Input" wix-option="{placeholder:'No Of Seats'}"></div></td>

                    </tr>

                    <tr>

                        <td colspan="2">

                          <button class="uilib-btn btn-black-text">Add</button>

                        </td>

                        <td>&nbsp;

                          

                        </td>

                    </tr>

                </table>

When i select group radiob button i want to show first table n when i select Early Bird button i want to see second table.

Anyone please give me the solution in javascript.

Thanks in advanced.