how to add new select box after clicking a button in jquery

Question

i dont know if its possible using jquery,..i have a select option that has an array of data came from database and what i want is that whenever i click a button, another select option will popout like the first select option.. here is the code of my select option

  <select class="form-control" name="room[]" id="room[]"> <option value="" default>Select</option> <?php $room = $subjectsClass->room(); foreach ($room as $key => $value) { echo '<option value=" ' . $value['room_id'] .' ">' . $value['room_no'] . '</option>'; } ?> </select> <button type="button" class="btn btn-default" id="addRooms" >Add more Rooms?</button> <script> $('#addRooms').click(function(){ //append another select box with data from database,..how?? }); </script> 

Answer 1

Let's say you have that wrapped into a div like:

<div id="the_div_of_wrapping"> all your stuff </div>

Then I would do:

var the_select = $("#room[]");
var the_id = the_select.prop("id");
var the_number_of_selects = $("select").length;
var the_div_of_wrapping = $("#the_div_of_wrapping");

the_select.clone().prop("id", the_id + the_number_of_selects);
the_div_of_wrapping.append(the_select);

.

Update:

As discussed in the comments, I would remove id since it is unnecessary and then the code would be:

var the_select = $("#room[]");
var the_div_of_wrapping = $("#the_div_of_wrapping");

the_select.clone();
the_div_of_wrapping.append(the_select);