JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://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();
    }
});