How to make a dynamic select?

Question

I’m doing a restaurant sisteminha, and he’s a commando. But, like, there’s a select of food orders, but I was wondering how I can do for when I click on the + sign appear another select under what already has to order other food, because not always the customer wants only one thing.

I’m doing the system with PHP and Javascript.

Answer 1

Would that be it? Instead of selecting another select, I made an example that when selecting adds an input with the added value.

$(".add").on('click',function(){
var cont=0;
$("#selecionados input").each(function(){
if($(this).val()==$("#selecionar option:selected").html()){
cont++;
 }
});
if(cont>0){ alert("Este item ja esta adicionado, altere a quantidade se deseja mais..");}
else{
$("#selecionados").append("<input disabled type='text' name='pedidos[]' value='"+$("#selecionar option:selected").html()+"' ><input type='text' name='quantidade[]' placeholder='quantidade'><br>");
}
});

.add{ text-decoration:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selecionar">
<option selected isabled>Selecione</option>
<option>Pao</option>
<option>Leite</option>
<option>Cafe</option>
</select>
<a class="add" href="#">+</a>
<hr>
Selecionados
<hr>
<div id="selecionados">
  
</div>

And in php Voce it would take the value in array, like this:

<?php $valores=$_POST['pedidos'] 
foreach($valores as $item){
echo $item."<br>";
}


?>