JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dinamic Input</title>
   
</head>
<body>
    
    <div id="box">
        <label for="nome">Nome</label>
        <input type="text" name="nome">
        <label for="cargo">Cargo</label>
        <input type="text" name="cargo">
        <label for="telefone">Telefone</label>
        <input type="text" name="telefone">
        <label for="email">Email</label>
        <input type="text" name="email">
    </div>
    <div id="box-2">

    </div>
    <button type="button" id="criar-input" onclick="addEmail()">Criar Novo Email</button>
    <button type="button" id="criar-input" onclick="addTelefone()">Criar Novo Telefone</button>
    <br>
    <button type="button" id="criar-input" onclick="addNovoContato()">Criar Novo Contato</button>
    <script type="text/javascript" src="main.js" defer></script>
</body>
</html>

JavaScript

function addTelefone(){
    var container = document.getElementById("box");
    var input = document.createElement("input");
    var label = document.createElement("label");
    var btn_delete = document.createElement("button");
    var br = document.createElement("br");

    label.innerText = "Telefone";
    label.htmlFor = "telefone";
    input.type = "text";
    input.name = "telefone";
    btn_delete.type = "button"
    btn_delete.innerText = "Deletar";
    
    container.appendChild(br);

    container.appendChild(btn_delete);
    container.appendChild(input);   
    container.appendChild(label);

    
}

function addEmail(){
    var container = document.getElementById("box");
    var input = document.createElement("input");
    var label = document.createElement("label");
    var btn_delete = document.createElement("button");
    var br = document.createElement("br");

    input.type = "text";
    input.name = "email";

    label.innerText = "Email";
    label.htmlFor = "email";

    btn_delete.type = "button"
    btn_delete.innerText = "Deletar";
    btn_delete.id = "btn-delete";

    
    container.appendChild(br);
    
    container.appendChild(btn_delete);
    container.appendChild(input);   
    container.appendChild(label);


    document.getElementById("btn-delete").onclick = function () {deleteEmail()};

    function deleteEmail(){
        btn_delete.remove();
        input.remove();
        br.remove();
        label.remove();
    }
        
}

function addNovoContato(){
    var container = document.getElementById("box-2");
    var nome_label = document.createElement("label");
    var nome_input = document.createElement("input");
    var cargo_label = document.createElement("label");
    var cargo_input = document.createElement("input");
    var telefone_label = document.createElement("label");
    var telefone_input = document.createElement("input");
    var email_label = document.createElement("label");
    var email_input =...