JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.andrewd.com.br/web-files/js/jquery.mascara.js"></script>
<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" />
        <a class="del">Deletar</a>
    </p>
    
</div>

CSS

#bt_add_novo_contato{cursor:pointer;}

JavaScript

// MASCARA

$("select[name='opt_tipo_contato[]']").change(function(){
 
    var $this = $(this);
        tipoContato    = $this.val();
        idContatoOpt   = $this.prop('id');
    
    if(!tipoContato)
        return false;
    
    var optValor = idContatoOpt.split("_"),
        inputId  = 'inp_tipo_contato_'+optValor[3],
        $input   = $('#' + inputId),
        inpClass = $this.find('option:selected').text().toLowerCase();
    
    $input.removeClass().addClass(inpClass);
    $("input.email").unmask();
    $("input.cep").mask("99.999-999");
    $("input.telefone, input.celular").mask("(99) 9999-9999");
});

$("select[name='opt_novo_tipo_contato[]']").change(function(){
 
    var $this = $(this);
        tipoContato    = $this.val();
        idContatoOpt   = $this.prop('id');
    
    if(!tipoContato)
        return false;
    
    var optValor = idContatoOpt.split("_"),
        inputId  = 'inp_novo_tipo_contato_'+optValor[4],
        $input   = $('#' + inputId),
        inpClass = $this.find('option:selected').text().toLowerCase();
    
    $input.removeClass().addClass(inpClass);
    $("input.email").unmask();
    $("input.cep").mask("99.999-999");
    $("input.telefone, input.celular").mask("(99) 9999-9999");
});
    
// CAMPOS DINAMICOS + MASCARA    
    
removeCampo();

var atual = 1;
$("#bt_add_novo_contato").click(function () {
   novoCampo = $("#box_add_contato .p_add_contato:first").clone().removeClass("cont_first").addClass("delContato");
        
   novoCampo.find('select').attr('id', 'opt_novo_tipo_contato_'+atual);
   novoCampo.find('input').attr('id', 'inp_novo_contato_valor_'+atual);
        
   //console.log(atual, novoCampo);
   novoCampo.insertAfter("#box_add_contato .p_add_contato:last");
   atual++;
   removeCampo();
});


function removeCampo() {
    $(".delContato a.del").unbind("click");
    $(".delContato a.del").bind("click", function () {
        
        i=0;
        
        $("#box_add_contato .p_add_contato").each(function ()...