Ho una select multi, una select2 per precisione :http://select2.github.io/select2/#multi

Alla selezione di uno dei valori vorrei che mi si creasse un input text con il nome del valore inserito, ad esempio:

<input name="rosso"
<input name="verde"

e così via.

Sono riuscito a creare l'input text al click ma non alla selezione e non riesco a cancellare gli input text alla deselezione.


codice:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>




<script>
$(function()
{
  $(".js-example-basic-multiple").select2();
});
</script>
































<script>
$(document).ready(function() {
    var max_fields      = 10;
    var wrapper         = $(".container1"); 
    var add_button      = $(".aggiungi-campo"); 
    
    var x = 1; 
    $(add_button).click(function(e){ 
        e.preventDefault();
        if(x < max_fields){ 
            x++; 
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete"> Cancella</a></div>'); //add input box
        }
        else
        {
        alert('Hai raggiunto i limiti')
        }
    });
    
    $(wrapper).on("click",".delete", function(e){ 
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>






























<select class="aggiungi-campo js-example-basic-multiple" multiple="multiple">
  <option value="rosso">rosso</option>
  <option value="verde">verde</option>
  <option value="giallo">giallo</option>
</select>




  
  
   
<div class="container1">
</div>