Inserire campi data (con maschera) dinamicamente

[Maures]

Buongiorno a tutti,
sto programmando una pagina con un form che richiede l'inserimento di una o più date. Per l'occasione ho usato questo codice per la parte di form (con bootstrap incluso):

<div class="row">
				<div class="col-xs-6">	
					<input class="form-control data" type='text' name='data' id='data' value=""/>
				</div>
					
			</div>

e questo script per crearne la maschera di inserimento

<script type="text/javascript">
			$(function() {
				$(".data").mask("**/**/****");
			});
		
		</script>

Fin qui tutto bene e se inserisco manualmente i campi nella pagina, la maschera funziona.
Quando però provo a inserirli in modo dinamico con un pulsante, perdo la maschera.
Qui c'è il codice dello script:

<script>
            $(function(){
                var i=2;
                $("#add").click(function(){
                    $("#myform").append("<div class='row'><div class='col-xs-6'><input class='form-control data' type='text' name='data" + i + "' id='data" + i + "' value=''/></div></div>");
                    i++;
                })
            })
        </script>

Guardando il codice che viene compilato è tutto ok, e gli id dei tag input aumentano regolarmente, eppure la maschera non viene loro applicata.

Dove sto sbagliando? O come posso modificare il codice per aggiungere una maschera a tutti i campi inseriti dinamicamente?

Grazie a tutti!