JSFiddle - React, Tailwind, and code Playground

HTML

<button class="add-contato">Novo Contato &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
                <button type="button" class="add-email">Novo Email &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
                <button type="button" class="add-telefone">Novo Telefone &nbsp;
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>
                <div>
                    <table>
                        <tbody class="container-contato">
                            <tr>
                                <td>
                                    <label><br>Nome</label>
                                    <input type="text" name="contato_rpps.nome['1']" class="nome">
                                    <br>
                                </td>
                                <td>
                                    <label><br>Cargo</label>
                                    <input type="text" name="contato_rpps.cargo['1']" class="cargo">
                                </td>
                                <td>
                                    <label><br>Email</label>
                                    <input type="email" name="contato_rpps.email['1']" class="email">
                                </td>
                                <td>
                                    <label><br>Telefone</label>
                                    <input type="text" class="telefone" placeholder="(00) 90000-0000" onkeyup="phoneMask()" name="contato_rpps.telefone['1']" maxlength="15">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

JavaScript

// funcao para adicionar um novo input no Contato
$(document).ready(function() {
    var max_fields = 99;
    var wrapper = $(".container-contato");
    var add_button = $(".add-contato");
    var add_email = $(".add-email");
    var add_telefone = $(".add-telefone");

    var x = 1;

    $(add_email).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append(`
        <tr>
          <td>
            <input type="text" name="contato_rpps.email['${x}']" placeholder="Outro Email"/>
          </td>
          <td>
              <a href="#" class="delete">Delete</a>
          </td>
        </tr>
        
      `)
        }
    });

    $(add_telefone).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append(`
       <tr>
          <td>
            <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()" placeholder="Outro Telefone"/>
          </td>
          <td>
              <a href="#" class="delete">Delete</a>
          </td>
        </tr>
      `)
        }
    });

    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append(`
          <tr>
            <td>
              <input type="text" class="nome" name="contato_rpps.nome['${x}']"/>    
            </td>
            <td>
              <input type="text" name="contato_rpps.cargo['${x}']"/>
            </td>
            <td>
              <input type="text" name="contato_rpps.email['${x}']"/>
              
            </td>
            <td>
              <input type="text" class="telefone" name="contato_rpps.telefone['${x}']" maxlength="15" onkeyup="phoneMask()"/>
            </td>
            <td>
              <a href="#" class="delete-contato">Delete</a>
            </td>
          </tr>
          `); //add input box

        } else {
     ...