How to clone bootstrap multi-select dynamically?

Question

 $(function() { $('#days').multiselect({ includeSelectAllOption: true }); $('#btnSelected').click(function() { var selected = $("#days option:selected"); var message = ""; selected.each(function() { message += $(this).text() + " " + $(this).val() + "\\n"; }); document.write(message); }); }); 

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script> <select id="days" multiple="multiple"> <option value="1">thusday</option> <option value="2">sunday</option> <option value="3">monday</option> <option value="4">tuesday</option> <option value="5">friday</option> </select> <input type="button" id="btnSelected" value="Get Selected" /> <button type="button" id="btn">+ Add Another Set OF Hourse </button> 

I am trying to do something like that when I click on add more button, multi-select drop-down will be cloned. And whenever, I click on submit it will show me selected values of all the multi-select(s).

Answer 1

I have added functionality to clone multi-select on clicking the add button. Moreover, I have modified selection method to get selected values from all the multi-select drop-down.

 $('#days').multiselect({ includeSelectAllOption: true }); var i = 1; $('#btnAddAnother').click(function(){ var clone_multiselect = $("#days").clone(); clone_multiselect.attr('id', 'days' + i); clone_multiselect.appendTo(".multiselect_container"); $(clone_multiselect).multiselect({ includeSelectAllOption: true }); i++; }); $('#btnGetSelected').click(function() { $('.results').empty(); $('select.multiselect').each(function(){ var id = $(this).attr('id'); var selected_option_selector = '#' + id + ' option:selected'; var result_str = '<b>' + id + '</b>: '; $(selected_option_selector).each(function(){ result_str += $(this).text() + ' - ' + $(this).val() + ', '; }); result_str = result_str.substring(0, result_str.length - 2); result_str += '<br />'; $('.results').append(result_str); }); }); 

 .results { margin-top: 20px; } 

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script> <div class="multiselect_container"> <select id="days" class="multiselect" multiple="multiple"> <option value="1">thusday</option> <option value="2">sunday</option> <option value="3">monday</option> <option value="4">tuesday</option> <option value="5">friday</option> </select> </div> <br /> <button id="btnGetSelected" class="btn btn-primary">Get Selected</button> <button id="btnAddAnother" class="btn btn-primary">+ Add Another Set OF Hourse</button> <div class="results"></div> 

Fiddle DEMO