<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> <div class="select-container"> <select class='select2' multiple> <option value='1'>option1</option> <option value='2'>option2</option> </select> <select class='select2' multiple> <option value='1'>option1</option> <option value='2'>option2</option> </select> </div> <div> <button class="add-new-select">Add New Select</button> </div>

$(document).ready(function() { //function to initialize select2 function initializeSelect2(selectElementObj) { selectElementObj.select2({ width: "80%", tags: true }); } //onload: call the above function $(".select2").each(function() { initializeSelect2($(this)); }); //dynamically added selects $(".add-new-select").on("click", function() { var newSelect = $("<select class='select2' multiple><option>option 1</option><option>option 2</option></select>"); $(".select-container").append(newSelect); initializeSelect2(newSelect); }); });