title: Get text box with textfields on radio button click
body: <p>I'm coding a page with some radio buttons and stuck with some problems. Here is my 
  current output</p>
  
  <p><img src="https://i.stack.imgur.com/UUAb2.png" alt="enter image description here"></p>
  
  <p>Below is my code</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          #sitehtn {
              display: none
          }
  
          .container {
              width: 100%;
              height: 600px;
              background-color: rgb(179, 174, 174);
          }
          #datepickerT {
              margin-left: 2em;
          }
          .eventDateDiv {
              height: 150px;
              width: 30%;
              margin-left: auto;
              margin-right: auto;
          }
          #daysBetween {
              margin-top: -1.4em;
              margin-left: 30%;
          }
          .eventShowDiv {
              height: 250px;
              width: 30%;
              margin-left: auto;
              margin-right: auto;
          }
          .event {
              color: green;
              margin-top: 5px;
          }
      &lt;/style&gt;
      &lt;script&gt;
          $(function() {
              $( "#datepickerF" ).datepicker({
                        showOn : "button",
                   buttonImage : "calendar.gif",
               buttonImageOnly : true
              });
  
              $( "#datepickerT" ).datepicker({
                        showOn : "button",
                   buttonImage : "calendar.gif",
               buttonImageOnly : true
              });
  
              $('#getdays').click(function() {
                  var start = $('#datepickerF').datepicker('getDate');
                  var end   = $('#datepickerT').datepicker('getDate');
                  var days   = (end - start)/1000/60/60/24;
                  document.getElementById("daysBetween").innerText=days;
              });
  
              $('input[type=radio]').change(function() {
                  $('#sitehtn').hide()
                  $(this).parent().next().show()
              });
  
              function displayResult(browser) {
                  document.getElementById("result").value=browser
              }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="eventDateDiv"&gt;
              &lt;div class="event"&gt;
                  EVENT DATE
              &lt;/div&gt;
              &lt;p&gt;FROM: &lt;input type="text" id="datepickerF" /&gt;&lt;/p&gt;
              &lt;p&gt;To: &lt;input type="text" id="datepickerT" /&gt;&lt;/p&gt;
              &lt;button id="getdays"&gt;NO.OF DAYS &lt;/button&gt;
              &lt;p id="daysBetween"&gt; &lt;/p&gt;
          &lt;/div&gt; 
          &lt;div class="eventShowDiv"&gt;
              &lt;div class="event"&gt;
                  EVENT SHOW TIME
              &lt;/div&gt;
              &lt;p&gt;TYPE OF SHOW: &lt;/p&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" /&gt;
                  Unique
              &lt;/label&gt;
              &lt;input type="text" name="site" id="sitehtn" /&gt;
              &lt;br /&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" /&gt;
                  Varied
              &lt;/label&gt;
              &lt;input type="text" name="textfield3" id="sitehtn" /&gt;
          &lt;/div&gt; 
      &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My actual expected output is.</p>
  
  <ol>
  <li><p>When I click on Unique radioButton, A textbox will appear and automatically Next 
  Radio Button(Varied)will hide</p></li>
  <li><p>The Text Box include..Four Text Fields Inside it..two fields For The FROM and
  TO Date picker and a Content Placeholder,and Last a Button To add same 4
  Fields to the next Line in the same Text Box</p></li>
  </ol>
  
  <p>As I'm new in this field, I need your support and valuable comments to solve this.</p>