title: Dynamically add dropdown fields and layout issue
body: <p>EDIT:</p>
  
  <p>Thanks to <code>mohd afzal</code> it creates the dropdowns but I still have a few errors:</p>
  
  <ul>
  <li>The lay-out isn't exactly how it should be (see image)</li>
  <li>The second dropdown created doesn't respond after you've selected a value in the first.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/6F98Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6F98Q.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>I followed this, and it works, but gives me different problems. (<a href="https://stackoverflow.com/questions/34532871/add-multiple-fields-to-form">Add multiple fields to form</a>)</p>
  
  <p>Current problems:</p>
  
  <ul>
  <li>I get input text fields instead of the dropdown menu's I created</li>
  <li>Messed up lay-out (see image)(I need the extra fields I get to be my dropdownboxes, and the amount field should be with the same code so the only numbers are allowed)</li>
  <li><strong>id and realName aren't shown in the images to prevent names to be shown</strong></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/L6MLX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L6MLX.png" alt="enter image description here"></a></p>
  
  <p>Image of the form before clicking on 'add more'.</p>
  
  <p><a href="https://i.stack.imgur.com/3ogzd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3ogzd.png" alt="enter image description here"></a></p>
  
  <p>Used code:</p>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $("#addMore").click(function(e) {
          e.preventDefault();
          $("#fieldList").append("&lt;li&gt;&amp;nbsp;&lt;/li&gt;");
          $("#fieldList").append("&lt;li&gt;&lt;input type='text' name='ddl[]' placeholder='Choose a project' /&gt;&lt;/li&gt;");
          $("#fieldList").append("&lt;li&gt;&lt;input type='text' name='ddl2[]' placeholder='Choose a date' /&gt;&lt;/li&gt;");
          $("#fieldList").append("&lt;li&gt;&lt;input type='text' name='amount[]' placeholder='Amount' /&gt;&lt;/li&gt;");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action="&lt;? echo $_SERVER['PHP_SELF']; ?&gt;" method="POST" name="contact"&gt;
      &lt;div class="row uniform 50%"&gt;
          &lt;div class="6u 12u(mobilep)"&gt;
              Your personal card number
              &lt;input type="text" name="card2" id="card" value="&lt;?php echo $_SESSION['username']; ?&gt;" placeholder="Card Number" readonly/&gt;
          &lt;/div&gt;
          &lt;div class="6u 12u(mobilep)"&gt;
              Your name
              &lt;input type="text" name="name2" id="name" value="&lt;?php echo $_SESSION['realName']; ?&gt;" placeholder="Your name" readonly/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row uniform 50%"&gt;
          &lt;div class="6u 12u(narrower)"&gt;
              Order tickets for a project.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row uniform 50%" id="fieldList"&gt;
          &lt;div class="4u 12u(narrower)"&gt;
              &lt;select name="ddl[]" id="ddl[]" onchange="configureDropDownLists(this,document.getElementById('ddl2'))"&gt;
                  &lt;option disabled selected&gt;Select a project&lt;/option&gt;
                  &lt;option value="Smile"&gt;Project Smile&lt;/option&gt;
                  &lt;option value="Sand"&gt;Project Sand&lt;/option&gt;
                  &lt;option value="Schmuck"&gt;Project Schmuck&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="4u 12u(narrower)"&gt;
              &lt;select id="ddl2[]" name="ddl2[]"&gt;
                      &lt;option disabled selected&gt;Select a date&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="2u 12u(narrower)"&gt;
              &lt;input type="text" onkeypress='return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57' name="amount[]" id="amount[]" value="" placeholder="Amount" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="row uniform"&gt;
          &lt;div class="12u"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="4u 12u(mobilep)"&gt;   
              Total price.(In EUR)
              &lt;input type="text" name="total2" id="total" value=""  readonly/&gt;
          &lt;/div&gt;
  
          &lt;div class="row uniform"&gt;
              &lt;div class="12u"&gt;
                  &lt;ul class="actions align-center"&gt;
                      &lt;li&gt;&lt;input type="submit" name="submit"value="Place Order"/&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>