title: Dynamic form field using HTML, and Bootstrap
body: <p>I was trying to create a dynamic form field using the code from this site<br>
  <a href="http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3" rel="nofollow">http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3</a></p>
  
  <p>Here is a piece of the code after I modify it</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="control-group" id="fields"&gt;
          &lt;div class="controls"&gt; 
           &lt;form role="form" autocomplete="off"&gt;
            &lt;div class="entry input-group col-xs-3"&gt;
             &lt;input class="form-control" name="fields[]" type="text" placeholder="Type something" /&gt;
             &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-success btn-add" type="button"&gt;
               &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
              &lt;/button&gt;
             &lt;/span&gt;
            &lt;/div&gt;
            &lt;!--Submit Button--&gt;
            &lt;div class="form-group"&gt;
             &lt;button type="submit" class="btn btn-default" &gt;Search&lt;/button&gt;
            &lt;/div&gt;
           &lt;/form&gt;
           &lt;br&gt;
          &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is, whenever I press the add field button, the new field goes below the Search button. I guess this is because of <code>div class="controls"</code> before the form. How can I solve this so that the dynamic field is still added above the search?</p>