How to auto update data on the page?

I have tried certain method to update. But failed to acheive so.


	function refreshOrderList() {
	frappe.call({
		method: "logi360.logi360.page.list_of_orders.list_of_orders.get_order_list",
		args: {},
		callback: function (r) {
			
			$.each(r.message, function (i, d) {
				//console.log(d);
				var newRow = $('<tr>').addClass('text-center').appendTo(tbody);
				$('<td>').text(i + 1).appendTo(newRow);
				$('<td>').text(d.creation).appendTo(newRow);
				$('<td>').text(d.name).appendTo(newRow);
				$('<td>').text(d.vendor_name).appendTo(newRow);
				$('<td>').text(d.customer_name).appendTo(newRow);
				$('<td>').text(d.primary_mobile_no).appendTo(newRow);
				$('<td>').text(d.is_paid_order).appendTo(newRow);
				$('<td>').text("Rs." + d.cod_amount).appendTo(newRow);
				$('<td>').text(d.delivery_amount).appendTo(newRow);
				$('<td>').text(d.address).appendTo(newRow);
				$('<td>').text(d.destination_branch).appendTo(newRow);
				$('<td>').text(d.status).appendTo(newRow);
				
			});
			$('.loader').empty()
		}
	});
}

	frappe.realtime.on('doc_update', function(data) {
		if (data.doctype === 'Logi360 Vendor Order') {
			refreshOrderList();
		}
	});
	
	// Call the function once to load the orders when the page is first loaded
	refreshOrderList();