Mehrfach AJAX verwenden ohne Refresh

[Amit]

Hallo,

ich bin ein Programmieranfänger, habe eine Tabelle mit Teilnehmer und möchte mit ajax ohne zu refreshen Teilnehmer hinzufügen und löschen können. Ich kann nun ohne Probleme einen Teilnehmer hinzufügen, die Seite refreshen und dann den Teilnehmer löschen. Wenn ich jedoch einen Teilnehmer hinzufüge, die seite nicht aktualisiere und den neu erstellten Teilnehmer löschen möchte, dann löscht sich die ganze Tabelle. Ich weiß leider überhaupt nicht warum das passiert.

Das ist meine Tabelle in HTML

 <tr id='appointment-<?= $appointment_ID ?>'>
            <td id='timestamp '><?= $timestamp ?></td>
            <td ><?= $appointment ?></td>
            <td id="username" ><?= $username?></td>
           <td >    
                    <button id='<?= $appointment_ID ?>' type='button' data-toggle='modal' data-appointment='<?= $appointment_ID ?>' data-username='<?= $username ?>' data-tID='<?= $tID ?>' data-timestamp='<?= $timestamp ?>' data-user_='<?= $user_ ?>' data-target='#delete-modal' class='btn btn-labeled btn-danger btn-sm btn-delete' title='Cancel appointment <?= $appointment_ID ?>'><span class='btn-label'><i class='glyphicon glyphicon-trash'></i></span>Cancel</button>      
           </td>
        </tr>

Damit adde ich einen neuen Teilnehmer:

      $("#add-appointment-save-btn").on('click', function(){ 
       
        $.ajax({
            type: "POST",
            dataType: "json",   
            url: "ajax/addAppointment.php",
            data: $( "#frm_addAppointment" ).serialize(),

        }).done(function(data) {
                var aID=data.appointment_ID;
                var date= data.date;
                var time= data.timestamp;
                var username= data.username;
                var tID=data.tID;
                var user_=data.user_;
                $('#add-appointment-by-admin-modal').modal('hide');
                console.log(data);
                console.log(data.date);
                console.log(data['user_']);
                oTable.api().row.add( [
                       time
                       ,date
                       ,username
                       ," <button id='"+aID+"' type='button' data-toggle='modal' data-appointment='"+aID+"' data-username='"+username+"' data-tID='"+tID+"' data-timestamp='"+time+"' data-user_='"+user_+"' data-target='#delete-modal' class='btn btn-labeled btn-danger btn-sm btn-delete' title='Cancel appointment "+aID+"'><span class='btn-label'><i class='glyphicon glyphicon-trash'></i></span>Cancel</button>"


            //          " <button id='"/* $appointment_ID */+"' type='button' data-toggle='modal' data-appointment='"/* $appointment_ID */+"' data-username='"/* $username */"' data-tID='"+<?= $tID ?>+"' data-timestamp='"/* $timestamp */+"' data-user_='"/*= $user_ */+"' data-target='#delete-modal' class='btn btn-labeled btn-danger btn-sm btn-delete' title='Cancel appointment "/* $appointment_ID */+"'><span class='btn-label'><i class='glyphicon glyphicon-trash'></i></span>Cancel</button>"

                ]).draw();
                    
               var n = noty({text: '<strong>Add Appointment</strong>: Successful'});
               $("#frm_timestamp_add option[value='"+time+"']").remove();
               $("#frm_user_add option[value='"+user_+"']").remove();

        
            }).fail(function( jqXHR, textStatus ) {
                 alert( "Request failed: " + textStatus );
            });
    });

Damit lösche ich einen Teilnehmer:

$("#delete-modal-save-btn").on('click', function(){ 

        var appointment_ID = $("#appointment_delete").val();

        $.ajax({
            type: "POST",
            dataType: "json",   
            url: "ajax/cancelAppointment.php",
            data: $( "#delete_form_id" ).serialize(),

            success: function(data){

               $('#delete-modal').modal('hide');
               oTable.fnDeleteRow($('tr#appointment-' + appointment_ID ) [0]);
               var n = noty({text: '<strong>Delete</strong>: Successful'});
            }
        });
    });
    
    $('#add-appointment-by-admin-modal').on('show.bs.modal', function(e) {

        //get data-id attribute of the clicked element
        var tID = $(e.relatedTarget).data('tid');
        $("#tID_add").val(tID); 
      
        console.log($(e.relatedTarget).data());
        
     
    });

Ich wäre über jede Hilfe Dankbar