title: Javascript: Adding fields dynamically
body: <p>I have a html page which looks like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script language="javascript"&gt;
      fields = 0;
      function addInput() {
         if ( fields != 3) {
            document.getElementById('text').innerHTML += "&lt;input type='text'         name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name' /&gt;";
            fields += 1;'
         } else {
            document.getElementById('text').innerHTML += "&lt;br /&gt;More then 3 not allowed.";
            document.form.add.disabled = true;
         }
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form name="form"&gt;
      &lt;input type="button" onclick="addInput()" name="add" value="Add More" /&gt;
  &lt;/form&gt;
  &lt;div id="text"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works perfectly fine for me. It adds text fields when the button is clicked. 
  But, I have another select tag which needs to be added dynamically when the button is clicked as well. The select form is as below:</p>
  
  <pre><code>&lt;select id="client_category_name" name="client_category[name]"&gt;
     &lt;option value=""&gt;Select Category&lt;/option&gt;
     &lt;option value="1"&gt;internal&lt;/option&gt;
     &lt;option value="2"&gt;external&lt;/option&gt;
     &lt;option value="3"&gt;others&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>How do we add this select tag alongside the input tag.</strong> I am a ruby on rails developer and finding it hard to implement it.</p>