Ajax debugging. Broken success

There is an ajax request that sends the server userid, username, periodbegindata, periodenddata via formdata. In response, data.outputusername and data.finalprice are received from the server and, depending on them, a contenttotalcosttable table row is formed on the client.

    $(document).ready(function() {
        $('.checkboxitemuserlisttotalcost').on('change', function (event) {
            let userid=event.target.value;
            let username=event.target.name;
            let periodbegin=document.querySelector('input[type="datetime-local"][id="beginlocaldate"]');
            let periodend=document.querySelector('input[type="datetime-local"][id="endlocaldate"]');
            let periodbegindata=periodbegin.value;
            let periodenddata=periodend.value;          
            console.log(periodbegin.value);         
            console.log(periodend.value);
            console.log(userid);
            console.log(username);
            let fd = new FormData();
            fd.append('userid', userid);
            fd.append('username', username);
            fd.append('periodbegindata', periodbegindata);
            fd.append('periodenddata', periodenddata);                      
            if (event.target.checked == true) {
                console.log('Inside checked');
                //console.log(document.getElementById('sumcostcalltable').innerHTML);
                //console.log(document.getElementsByClassName('wrapper')[2].innerHTML);             

            $.ajax ({
                    method: 'POST',
                    url: 'totalcost.php',
                    cache: false,
                    data: fd,
                    // data: 'userid=' + userid + '&username='+ username+ '&periodbegindata='+ periodbegin.value + '&periodenddata=' + periodend.value,
                    //data: {userid: userid, username: username, periodbegindata: periodbegindata, periodenddata: periodenddata}; 
                    processData: false,
                    contentType: false,
                    // contentType: 'multipart/form-data', 
                    dataType: 'json',
                    success: function (data) {
                        console.log('Inside success');
                        console.log(data);
                        let contenttotalcosttable = document.getElementById('stattable').innerHTML;
                        contenttotalcosttable += '<tr class=totalcost'+userid+'>';
                        contenttotalcosttable += '<td>'+ data.outputusername +'</td>';
                        console.log(data.finalprice);
                        contenttotalcosttable += '<td>'+ Math.trunc(data.finalprice/100) + ' руб. ' + (data.finalprice%100) + ' коп.' + '</td>';
                        contenttotalcosttable += '</tr>';

                        $('#stattable').html(contenttotalcosttable);
                        //document.getElementsByClassName('sumcostcalltableforinstance')[0].innerHTML=contenttotalcosttable;
                        console.log(contenttotalcosttable);

                    }
                    /*
                    complete: function(data) {
                        console.log(data.outputusername);
                        console.log(data.finalprice);
                    },
                    */                  

            }
            )

        }
        else {
            $('.totalcost'+ userid).remove();

        }           


        }
        )
    }
    )   

But as a result, the table row is not created and the debug output is inside success

 console.log('Inside success');

it doesn't work. How to debug ajax - what data comes to the server and what it receives (how to display what comes before success and what data success returns)? How to achieve the correct ajax execution?