$(document).ready(function() {
	let counter = 0;
								
	function buildTable() {
		$.ajax({
			type: 'GET',
			url: "https://flogdev.com/wp-content/themes/newForklog/coingecko-updater.php",
			dataType: "json",
			success: function(msg) {
				let trHTML = '';

				if (counter === 0) {
					$.each(msg, function (index, item) {
						trHTML += `<tr><td class='market_cap_rank'>${item.market_cap_rank}</td><td><img src='${item.image}'/></td><td class='name'>${item.name}</td><td class='symbol'>${item.symbol}</td><td class='price'>${item.price}</td><td class='price_change'>${item.price_change_percentage_24h}</td><td class='volume'>${item.volume}</td><td class='market_cap'>${item.market_cap}</td></tr>\n`;
					});
												
					$('#rates_table tbody').append(trHTML);
					counter++;
				} else {
					// console.log('haha, ELSE IS HERE');

					// Здесь нужно обновлять 4 колонки
					// 1. Price, $
					// 2. 24h Price Change, %
					// 3. Volume, $
					// 4. Market Cap, $
					// ПРОБЛЕМА В ТОМ ЧТО Я ЧЕРЕЗ .each() пробовал делать и обновляло ячейки с ценой одним значением
					// (последним). Как будет лучше сделать обновление колонок чтобы не писать 4 цикла?
					// Я думал удалять tbody и отстраивать заново, но потом понял, что так данные не сохранятся.					

				}
			}
		});
		console.log('Done.');
	}

	buildTable(); // отстраиваю таблицу в первый раз

	// будущая отстройка таблицы при обновлении полей через таймаут и рекурсию
	let buildAndTimeout = setTimeout(function invoke() {
		buildTable();
		buildAndTimeout = setTimeout(invoke, 10000);
	}, 10000);
});