JavaScript function to display multiple divs using select

Question

I am trying to display a div a number of times based on the number selected by a user in a select drop down.

I have a function i have used previously:

$(document).ready(function(){
var el = '<div class="form-group">' +
'<label for="Name" class="col-sm-4 control-label">Name:</label>' +
'<div class="col-sm-8 input">'+
    '<input type="text" class="form-control" id="Name" name="Name[]" placeholder="Enter name" value="" required="required">'+
'</div>' +
'</div>' ;

$('#numNames').on('change', function(e) {
  var numSelected = $(this).val();
  appendControls(numSelected);
});

function appendControls(num) {
  $('#elcontainer').empty();
  for (var i=0; i<Number(num); i++) {
     $('#elcontainer').append(el);
  } 
}
});

This function woks fine for displaying that div but this time i am trying to display a div that contains some php code:

<div class="form-group">
<script>
function ChooseName(data) {
document.getElementById ("Name").value = data.value;
}
</script>

<label for="airline" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 input">
<input type="text" class="form-control" id="Name" name="Name" placeholder="Enter Name or Choose From the List Below" value="">
<select name="selectName" id="selectName" onchange="ChooseName(this)">
<?php
$dbQuery = $db->prepare("SELECT Name FROM users ORDER BY Name asc");
$dbQuery->execute();

    while ($dbRow = $dbQuery->fetch(PDO::FETCH_ASSOC))
    {
        echo '<option value= "'. $dbRow['Name'] . ' ">' . $dbRow['Name'] . '</option>'; 
    }
?>
</select>
</div>
</div>

I have tried to set the function up in the same way as above for this div but i have been unable to find a way to do it.

Is there any way in which i can do it this way? or is there a similar way i could do i?

Answer 1

Put -

<script>
function ChooseName(data) {
document.getElementById ("Name").value = data.value;
}
</script>

Out side the div. Then clone the div with events -

function appendControls(num) {
  $('#elcontainer').empty();
  var el = $('.from-group:first').clone(true, true);
  for (var i=0; i<Number(num); i++) {
     $('#elcontainer').append(el);
  } 
}