Tenho uma página de cadastro e logo abaixo do formulário tenho uma tabela que mostra os registros cadastrados. Essa tabela HTML é montada com os dados cadastrados usando JSON via jQuery. Até nesse ponto funciona perfeitamente, mas o que eu preciso é que a cada registro cadastrado seja atualizado nessa tabela HTML abaixo do formulário apenas o registro que foi cadastrado naquele momento e mantendo os outros que já estavam. Mas quando eu faço isso ele mostra o registro atual que cadastrei, mas ele duplica todos os outros registros cadastrados. Como posso resolver isso?
jsonTreatments();
$("form[name='form_register_treatment']").on('submit', function( event ) {
event.preventDefault();
$.ajax({
url: "http://...",
type: "POST",
dataType: "json",
data: $( this ).serialize()
}).done(function( register ){
if( register.verified === 'registered' ){
swal( "Sucesso!", register.message , "success" );
jsonTreatments();
}else{
swal( "Erro!", register.message , "error" );
}
});
return false;
});
function jsonTreatments(){
$.getJSON( "http://...",
{id : 7 }, function( treatment ){
var itens = "";
$.each(treatment, function( key, val){
itens += "<tr>";
itens += "<td>" + val.treatment_date_register + "</td>";
itens += "<td>" + val.treatment_procedure + " <br> <small class'text-primary'>"+ val.treatment_covenant + "</small></td>";
itens += "<td>" + val.treatment_teeth + "</td>";
itens += "<td>" + val.treatment_faces + "</td>";
itens += '<td> <button class="btn btn-default btn-circle btn-sm"><i class="fa fa-check"></i></button> <button class="btn btn-danger btn-circle btn-sm"><i class="fa fa-trash"></i></button> </td>';
itens += "</tr>";
})
$('#treatments_patient').append( itens );
});
}
<table class="table color-table info-table">
<thead>
<tr>
<th>Data</th>
<th>Procedimento</th>
<th>Dente(s)</th>
<th>Faces</th>
<th>Ações</th>
</tr>
</thead>
<tbody id="treatments_patient">
</tbody>
</table>