I am trying to make a form with radio button in bootstrap, such that whenever a radio button is toggled, a different form with new fields should appear subsequently:

<tr>
 <td><label for="exampleInputEmail3" class="input-group">1 or 2 ? </label></td>
                       
       <td>
         <select id="whatever" name="whatever" class="input-group">

    	 <input type="radio" name="radioName" value="1" />one<br />
		 <input type="radio" name="radioName" value="2" />two<br />>
         </select>
      </td> 
</tr>

If user selects option 1, form 1 needs to be displayed just below it otherwise form 2 needs to be shown.

The form 1 looks like:

<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">1</label></td>
</tr>

The form 2 looks exactly the same with different label:

<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">2</label></td>
</tr>

First, you'll need different ID's for your table rows. Two elements cannot share the same ID. You can listen for changes with the change function and then toggle the visibility of both rows at the same time by using the comma to grab multiple selectors and then show/hide each respectively with toggle

$('input[name="radioName"]').change(function () {
    $("#whatever_description1, #whatever_description2").toggle();
});

Here's a demo in fiddle


If you want more control, see get value from radio group using jquery