bootstrap form add div, нажав кнопку добавления

Question

У меня есть форма, где я хочу, чтобы мои пользователи добавили максимум 3 языковых навыков и уровней языков. Я бы хотел только показать его и позволить пользователю нажимать, чтобы добавить еще один (добавьте еще один «profile2» div, max add 3). Я так и не нашел этого.

мой HTML-код:

 <div class="container"> 
    <div class="profile2"> 
     <label for="sel1" class="langlevel">Language</label> 
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select> 
<label for="sel1" class="langlevel">Language Level</label> 
<select class="form-control" data-language="en" id="sel1"> 
<option>Basic</option> 
<option>Fluent</option> 
<option>Professional</option> 
<option>Native</option> 
</select> 
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button> 
    </div> 
    </div> 

сценарий

<script> 
$("#btnAddLanguage").click(function() { 
     $('#container').append("<div class="profile2"> 
     <label for="sel1" class="langlevel">Language</label> 
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select> 
<label for="sel1" class="langlevel">Language Level</label> 
<select class="form-control" data-language="en" id="sel1"> 
<option>Basic</option> 
<option>Fluent</option> 
<option>Professional</option> 
<option>Native</option> 
</select> 
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button> 
    </div>"); 
    }); 
    </script> 

Answer 1

это то, что вам нужно? пожалуйста, проверьте это.

<script> 
 
$("#btnAddLanguage").click(function() { 
 
\t var $appendItem = $('.profile2').html(); 
 
    \t $($appendItem).appendTo('.profile2'); 
 
}); 
 
</script>

<div class="profile2"> 
 
    <label for="sel1" class="langlevel">Language</label> 
 
    <select class="form-control bfh-languages" data-language="en" id="sel1"></select> 
 
    
 
    <label for="sel1" class="langlevel">Language Level</label> 
 
    <select class="form-control" data-language="en" id="sel1"> 
 
    <option>Basic</option> 
 
    <option>Fluent</option> 
 
    <option>Professional</option> 
 
    <option>Native</option> 
 
    </select> 
 
    <button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button> 
 
</div>