Mount HTML table using JSON AJAX

Question

I have a registration page and just below the form I have a table that shows the registered records. This HTML table is mounted with the data registered using JSON via jQuery. Even at this point it works perfectly, but what I need is for each registered record to be updated in this HTML table below the form only the record that was registered at that time and keeping the others that were already. But when I do this it shows the current record that I have registered, but it duplicates all other registered records. How can I resolve this?

       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>

Answer 1

You call the function jsonTreatments() load and mount the table. Then in the first Ajax you call the function again making a .append() with the same data coming from the second Ajax, with this feeding the table with the values that were already there.

The way to solve is to empty the table before the append. You solve this with the method .empty() before the .append():

$('#treatments_patient').empty().append( itens );