JSFiddle - React, Tailwind, and code Playground

by Evert Ramos

HTML

<script src="//igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<label for="telefone">Telefone(s)</label>
<button type="button" onclick="clone_obj('group_telefone', 'novo_telefone')">Adicionar Telefone</button>                        
<br>
<div id="group_telefone">
    <input type="text" class="phone" name="telefone[]">
    <span>
    <button type="button" onclick="delete_obj(this, 'group_telefone')">X</button>
    </span>        
</div>
<span id="novo_telefone"></span>

JavaScript

var maskBehavior = function (val) {
  return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
options = {onKeyPress: function(val, e, field, options) {
        field.mask(maskBehavior.apply({}, arguments), options);
    }
};

$('.phone').mask(maskBehavior, options);

$(document).ready(function (){
    clone_obj = function(obj_name, obj_destination) {
        $('#' + obj_name).clone().appendTo('#' + obj_destination).find("input[type='text']").val('');        
    }
    
    delete_obj = function(obj_name, group) {
        $(obj_name).closest('#' + group).remove();        
    }
});