JSFiddle - React, Tailwind, and code Playground

by JCMais

HTML

<script src="http://www.andrewd.com.br/web-files/js/jquery.mascara.js"></script>
<div id="wrp">
    <h3>Mascara nos campos dinamicamente</h3><br />
    
    <select name="opt_tipo_contato[]" id="opt_tipo_contato_0">
        <option value=""></option>
        <option value="1">CELULAR</option>
        <option value="2">TELEFONE</option>
        <option value="3">CEP</option>
        <option value="4">EMAIL</option>
    </select>
    <input type="text" name="inp_tipo_contato[]" id="inp_tipo_contato_0" />
    
    <br />
    
    <select name="opt_tipo_contato[]" id="opt_tipo_contato_1">
        <option value=""></option>
        <option value="1">CELULAR</option>
        <option value="2">TELEFONE</option>
        <option value="3">CEP</option>
        <option value="4">EMAIL</option>
    </select>
    <input type="text" name="inp_tipo_contato[]" id="inp_tipo_contato_1" />
    
    <br />
    <br />
    
    <div id="box_add_contato">
        
        <span id="bt_add_novo_contato">Adicionar mais contato</span><br />
        
        <p class="p_add_contato cont_first">
            <select name="opt_novo_tipo_contato[]" id="opt_novo_tipo_contato_0">
                <option value=""></option>
                <option value="1">CELULAR</option>
                <option value="2">TELEFONE</option>
                <option value="3">CEP</option>
                <option value="4">EMAIL</option>
            </select>
            <input type="text" name="inp_novo_tipo_contato[]" id="inp_novo_tipo_contato_0" />
        </p>
        
    </div>
</div>

CSS

#bt_add_novo_contato{cursor:pointer;}

JavaScript

// MASCARA

var changeSelect = (function(){ //Você repetiu código, evite fazer isto, as funções em Javascript são objetos de primeira classe, você pode salvá-las em uma variavel para reaproveitamento.
 
    var $this = $(this);
        tipoContato    = $this.val();
        idContatoOpt   = $this.prop('id');
    
    if(!tipoContato)
        return false;
    
    var optValor = idContatoOpt.split("_"),
        inpClass = $this.find('option:selected').text().toLowerCase();
    
    console.log(optValor[1]);
    
    if(optValor[1] === 'novo'){
       var inputId  = 'inp_novo_tipo_contato_'+optValor[4];
    } else {
       var inputId  = 'inp_tipo_contato_'+optValor[3];
    }
    
    var $input   = $('#' + inputId);
    
    $input.val('').removeClass().addClass(inpClass).unmask().focus();
    // Apenas precisava adicionar o unmask aqui, assim ele retira as mascaras adicionadas posteriormente. Apliquei um focus para melhorar a experiência do usuário, assim o campo já ganha o foco automaticamente.
    $("input.cep").mask("99.999-999");
    $("input.telefone, input.celular").mask("(99) 9999-9999");
});

$("select[name='opt_novo_tipo_contato[]']").change(changeSelect);

$("select[name='opt_tipo_contato[]']").change(changeSelect);

var atual = 0;
$("#bt_add_novo_contato").click(function () {
    atual++;
    var $contatoWrp = $('#box_add_contato'),
        $novoCampo = $contatoWrp.find("p.p_add_contato:first").clone().removeClass("cont_first").addClass("delContato");
        // /\ Caso o primeiro seletor seja uma id, deixe o só e use find. No seletor não use apenas classe, coloque o tipo de elemento da mesma na frente também, assim o elemento é "encontrado" mais rapidamente
    
    $contatoWrp.append($novoCampo.hide());
    
    $novoCampo.find('select').attr('id', 'opt_novo_tipo_contato_'+atual).change(changeSelect)
        .end().find('input').attr('id', 'inp_novo_tipo_contato_'+atual).val('')
        .end().append('<a...