Add-new
HTML
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.4.3.min.js" integrity="sha256-+ACzmeXHpSVPxmu0BxF/44294FKHgOaMn3yH0pn4SGo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
<div id="Multiple-Fields">
<p>
<label for="items_list">
<select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
</select>
</label>
</p>
</div>
<h6><a href="#" id="add_Multiple-Fields">Add Multiple Fields</a></h6>
JavaScript
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiple', {
removeItemButton: true,
maxItemCount:5,
searchResultLimit:5,
renderChoiceLimit:5
});
});
$(function() {
var scntDiv = $('#Multiple-Fields');
var i = $('#Multiple-Fields p').size() + 1;
$('#add_Multiple-Fields').live('click', function() {
$('<p> <label for="items_list"><select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple><option value="Item 1">Item 1</option><option value="Item 2">Item 2</option></select></label> <a href="#" id="rem_Multiple-Fields">Remove Field</a></p>').appendTo(scntDiv);
i++;
return false;
});
$('#rem_Multiple-Fields').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});