title: bootstrap form add div by clicking add button
body: <p>I have a form where I would like my users to add max 3 of languages skills and languages levels. I would like to only show it one and let user click to add one more (add one more "profile2" div, max add 3). I did not find anyway to do it. </p>
  
  <p>my html code: </p>
  
  <pre><code>      &lt;div class="container"&gt;
      &lt;div class="profile2"&gt;
           &lt;label for="sel1" class="langlevel"&gt;Language&lt;/label&gt;
  &lt;select class="form-control bfh-languages" data-language="en" id="sel1"&gt; &lt;/select&gt;
  &lt;label for="sel1" class="langlevel"&gt;Language Level&lt;/label&gt;
  &lt;select class="form-control" data-language="en" id="sel1"&gt;
  &lt;option&gt;Basic&lt;/option&gt;
  &lt;option&gt;Fluent&lt;/option&gt;
  &lt;option&gt;Professional&lt;/option&gt;
  &lt;option&gt;Native&lt;/option&gt;
   &lt;/select&gt;
   &lt;button id="btnAddLanguage" class="btn btn-warning btn-md" type="button"&gt;Add Language&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>script</p>
  
  <pre><code>    &lt;script&gt;
   $("#btnAddLanguage").click(function () {
        $('#container').append("&lt;div class="profile2"&gt;
           &lt;label for="sel1" class="langlevel"&gt;Language&lt;/label&gt;
  &lt;select class="form-control bfh-languages" data-language="en" id="sel1"&gt; &lt;/select&gt;
  &lt;label for="sel1" class="langlevel"&gt;Language Level&lt;/label&gt;
  &lt;select class="form-control" data-language="en" id="sel1"&gt;
  &lt;option&gt;Basic&lt;/option&gt;
  &lt;option&gt;Fluent&lt;/option&gt;
  &lt;option&gt;Professional&lt;/option&gt;
  &lt;option&gt;Native&lt;/option&gt;
   &lt;/select&gt;
   &lt;button id="btnAddLanguage" class="btn btn-warning btn-md" type="button"&gt;Add Language&lt;/button&gt;
      &lt;/div&gt;");
      });
      &lt;/script&gt;
  </code></pre>