Me gustaría eliminar el jquery de aquí y hacerlo con javascript simple. ¿Cómo puedo hacer eso? ¿O cómo podría hacer eso sino de una manera más simple y mejor?

 <script> let serverData = { 'server1': [], 'server2': [], 'server3': [], }; const body = $('body'); function displayInTable(server) { if(serverData[server]) { const serverTable = $(`tbody#${server}`); serverTable.html(''); serverData[server].forEach((user) => { serverTable.append('<tr><td>'+user.id+'</td><td>'+user.nume+'</td><td>'+user.autor+'</td><td>'+user.album+'</td><td>'+user.gen+'</td><td>'+user.an+'</td></tr>'); }) } } async function firstFetch() { const request = await fetch('ajax/colectareDate.php'); const response = await request.json(); if(response) { Object.keys(response).forEach((server) => { serverData[server] = response[server] displayInTable(server) }) } } [13:35] body.on('submit', '#mainForm', async function(e) { e.preventDefault(); const request = await fetch('ajax/inserareDate.php?'+$(this).serialize()); const server = 'server1'; serverData[server] = await request.json(); displayInTable(server); }); body.on('click', '.syncButton', async function() { const from = $(this).attr('data-from'); const to = $(this).attr('data-to'); const request = await fetch('ajax/sincronizare.php?from='+from+'&to='+to); serverData[to] = await request.json(); displayInTable(to); }); </script>