JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" enctype="multipart/form-data" >
<h1>Digite um numero de 1 á 6</h1>
	<div class="participantes">
		<div class="trabalhador" id="tra_0">
            <input type="text" name="0_matricula" placeholder="Matrícula" class="matricula" onchange="mudanca(this)"  />
            <input type="text" name="0_nome" placeholder="Nome" class="nome" />
            <input type="text" name="0_funcao" placeholder="Funçao" class="funcao" />
    	</div>
    </div>
    <br>

	
   <div class="novo">Acrescentar append</div> 
   
</form>

CSS

.novo{width:300px; height:30px; line-height:30px; text-align:center; background-color:#CCC; cursor:pointer}

JavaScript

$(this, ".trabalhador").ready(function(e) {
    

$(this, ".matricula").change(function (){
	$.ajax({
		 type      : 'get', 
         url: "//vullsper.com/consultaajax/retorno.php", //URL de destino
		 data      : 'nome='+ $('.matricula').val(), 
         dataType: "json", //Tipo de Retorno
		 cache: false,
         success: function(json){ //Se ocorrer tudo certo
            var html =
			
			html += $(".trabalhador .nome").val(json.nome);
			html += $(".trabalhador .funcao").val(json.funcao);
			
         }
      });
   });
   
   });

$(".novo").click(function(){
	var n = $("div.trabalhador").length;
	if( n <= 2){	
	$(".participantes").append('<div class="trabalhador" id="tra_'+n+'"><input type="text" name="'+n+'_matricula" placeholder="Matrícula" class="matricula" /><input type="text" name="'+n+'_nome" placeholder="Nome" class="nome" /><input type="text" name="'+n+'_funcao" placeholder="Funçao" class="funcao" /></div>');    
    $(".adicionados").val(""+ n + "");
	
	
	if(n == 2){$(".participantes").append('<div class="aviso">Limite de sites atingido</div>'); $(".novo").css({display:"none"})}
	}
})

jQuery(function($){
   $(".data").mask("99/99/9999");
   $(".hora").mask("99:99");
});