Dynamically add select option with options from php - php

Question

How do I create a dynamic select input with options from PHP whenever I click on a button?
The working should go like this:
Whenever I click on a button, a select element with options from PHP should be available to choose from.
<div class="form-group">
<label class="control-label col-sm-2" for="product">Products:</label>
<div class="col-sm-4">
<select class="form-control" name="product[]" multiple required>
<option selected="selected">--SELECT PRODUCT--</option>
<?php
$sql = "SELECT * FROM `product`";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
?>
<option value="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></option>
<?php
}
?>
</select>
</div>
</div>
Whenever I click on a button, I should be able to create a new select input with the above-mentioned code.

Answer 1

here you need to use ajax like below
function getOptions(query){
$.post(endPoint, query, function(response){
$('select[name="product[]"]').empty();
response.forEach(function(value){
$('select[name="product[]"]').append("<option value='" +value+ "'></option>");
});
})
}
and trigger it on click
$('body').on('click', '#myButton', function(){
getOptions(null);
});