Afficher dans une balise input plusieurs options d'un select

Bonjour,

Mon problème est le suivant : je cherche à récupérer les options sélectionnées d'un formulaire, et les afficher dans une balise input au fur et à mesure qu'elles sont sélectionnées avec un bouton. Quelqu'un peut-il m'aider s'il vous plaît ?

Voici mon code HTML/PHP:

<form method="POST">
<[/contents/242-introduction-au-dynamic-html-dhtml div] class="input-group">
<span class="input-group-addon" id="sizing-addon1"><i class="fa fa-users"></i></span>
<select name="groupe" class="form-control" id="groupe" aria-describedby="sizing-addon1">
</div><br>
<?php

while ($categorie = $req1->fetch()) {
?>
   
            <option <?php if ($categorie['nom']=='...'){ echo 'selected="selected"';}?> value="<?php echo $_POST["groupe"]; ?>"><?php echo $categorie['nom']; ?></option>
  
<?php
}

echo '</select><br></div>';
?>
<input type="button" id="btSubmit" value="Ajouter"/> 
<br/><br/>
<span id="groupesAjoutés"></span>
<!--</br><input type="button" value="Ajouter" onclick="AjouterGroupe()"/> -->
<?php 


<input type="text" name="grp" class="form-control" value =" "></br>

   <?php
 echo '<br><div class="input-group">'.
    '<span class="input-group-addon" id="sizing-addon2"><i class="fa fa-sun-o"></i></span>'.;

Mon code Javascript :

var inputs = $('.form-control');
var query = new Object();

$("#btSubmit").click(function(){ 
    
    $('#groupesAjoutés').empty();
           inputs.each(function(){
           var id  = $(this).attr('id');
           var value =  $(this).find("option:selected").text();
           query[id] = value;
 
       });
    
  console.log(query);
 
 $.each(query, function(key, element) {
         if(element != '')
         {
            var afficheCriteres  = ' '+element   
            $('#groupesAjoutés').append(afficheCriteres);
         } 
         
      });     

    
}); 

EDIT : Ajout des balises de code (la coloration syntaxique). Explications disponibles ici :ICI Merci d'y penser dans tes prochains messages.