Add/Del Input telefones com mascara

[sacjamm 0]

Olá prezados, estou com um desafio, ao qual não consigo resolver.

<script>
jQuery(document).ready(function () {

  var campos_max = 10;   //max de 10 campos
  var x = 1; // campos iniciais
  jQuery('#add_field').click(function (e) {
    e.preventDefault();     //prevenir novos clicks
    if (x < campos_max) {
       jQuery("#te").mask("(99)99999-9999");
       jQuery('#listas').append('<div>\<div class="row"><div class="col-md-5 form-group">\<label class="control-label" for="te">Digite o telefone</label><br>\<div class="input-group">\<span class="input-group-addon">\<i class="fa fa-mobile"></i></span>\
       <input type="text" name="tel_number[]" class="form-control" id="te" placeholder="(99)9999-9999">\</div></div>\<div class="col-md-5 form-group"><label class="control-label" for="r">Digite a referencia</label><br><div class="input-group"><span class="input-group-addon"><i class="fa fa-bank"></i></span>\
       <input type="text" name="tel_ref[]" class="form-control" id="r" placeholder="Digite a referencia">\
       </div></div>\</div>\<a href="#" class="remover_campo btn btn-danger">Remover</a>\
       </div>');
        x++;
    }
 });

 // Remover o div anterior
   jQuery('#listas').on("click", ".remover_campo", function (e) {
      e.preventDefault();
      jQuery(this).parent('div').remove();
       x--;
    });
   });
</script>
<header class="panel-heading info">

<a id="add_field" href="#" class="btn btn-success fa fa-plus pull-right"> Incluir telefone</a>

<h2 class="panel-title"><i class="fa fa-mobile"></i> <?= utf8_encode('Cadastro de telefones e referências'); ?></h2>
</header>

<div id="listas" class="panel-body">

   <div class="row">

     <div class="col-md-5 form-group">
         <label class="control-label" for="te">Digite o telefone</label><br>
          <div class="input-group">
             <span class="input-group-addon">
                 <i class="fa fa-mobile"></i>
            </span>
             <input type="text" name="tel_number[]" value="<?php if (!empty($UserData['tel_number'])) echo $UserData['tel_number']; ?>" class="form-control" id="te" placeholder="(99)9999-9999" required="">
        </div>
    </div>

Eu queria fazer com que todos os campos ao ser solicitado um campo tenham mascara, porém essas mascara possa aceitar tanto telefone fixo, quanto telefone celular.

 

Obs.: Eu só conseguir colocar mascára no primeiro campo, somente não conseguir nos campos que vem dinamicamente pelo jquery.

 

Fico aguardando possível ajuda e orientação.

 

Atenciosamente,

 

Alisson Maciel

[AndersonMamede 88]

Olá!

 

Cada elemento deve ter um ID único. Você não pode repetir o mesmo ID em outros elementos...

 

E para funcionar a máscara nos campos que você criou por javascript você tem que chamar novamente a função de máscara nesses elementos logo após criá-los.

[Gabriel Heming 766]

Você pode criar uma função para adicionar a máscara no evento onFocus.

 

Assim, contemplaria, também, os elementos criados dinamicamente.