title: Dynamically adding input text field with label in place of drop down menu
body: <p>I want to replace drop down menu when a specific option selected from a  drop down menu. </p>
  
  <p>Here<a href="https://i.stack.imgur.com/59WFl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/59WFl.png" alt="enter image description here"></a>      is drop down menu </p>
  
  <p>When ever a user select other from drop down menu , I want to replace this  drop down menu with  input field 
   like <a href="https://i.stack.imgur.com/RA7kB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RA7kB.png" alt="enter image description here"></a></p>
  
  <p>I tried with  following code but it didn't work for me </p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;"&gt;Your Location&lt;/label&gt;
      &lt;div class="col-sm-10"&gt;
          &lt;select class="selectpicker form-control" id="location" name="location" required="true"&gt;
              &lt;option value="jaipur" disabled="disabled" selected="selected"&gt;Jaipur&lt;/option&gt;
              &lt;option value="shimla"&gt;Shimla&lt;/option&gt;
              &lt;option value="bangalore"&gt;Bangalore&lt;/option&gt;
              &lt;option value="hyderabad"&gt;Hyderabad&lt;/option&gt;
              &lt;option value="mumbai"&gt;Mumbai&lt;/option&gt;
              &lt;option value="varansi"&gt;Varanasi&lt;/option&gt;
              &lt;option value="dehradun"&gt;Dehradun&lt;/option&gt;
              &lt;option value="masoori"&gt;Masoori&lt;/option&gt;
              &lt;option value="goa"&gt;GOA&lt;/option&gt;
              &lt;option value="udaipur"&gt;Udaipur&lt;/option&gt;
              &lt;option value="kokata"&gt;Kolkata&lt;/option&gt;
              &lt;option value="agra"&gt;Agra&lt;/option&gt;
              &lt;option value="allahabad"&gt;Allahabad&lt;/option&gt;
              &lt;option value="amritsar"&gt;Amritsar&lt;/option&gt;
              &lt;option value="chandigarh"&gt;Chandigarh&lt;/option&gt;
              &lt;option value="chennai"&gt;Chennai&lt;/option&gt;
              &lt;option value="lucknow"&gt;Lucknow&lt;/option&gt;
              &lt;option value="nanital"&gt;Nanital&lt;/option&gt;
              &lt;option value="ludhiana"&gt;Ludhiana&lt;/option&gt;
              &lt;option value="patiala"&gt;Patiala&lt;/option&gt;
              &lt;option value="others" onclick="addElement();"&gt;other&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="hidden" value="0" id="theValue" /&gt;
          &lt;div id="myDiv"&gt; &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript that I am using is </p>
  
  <pre><code>function addElement() {
      var ni = document.getElementById('myDiv');
      var numi = document.getElementById('theValue');
      var num = (document.getElementById('theValue').value -1)+ 2;
      numi.value = num;
      var newdiv = document.createElement('div');
      var divIdName = 'my'+num+'Div';
      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = 'Element Number '+num+' has been added!';
      ni.appendChild(newdiv);
  }
  </code></pre>
  
  <p>Can someone guide me to achieve the desired goal?</p>