function setButtonNames(names) {
    const buttons = document.querySelectorAll('#tableBody-address .grid-item');

    buttons.forEach((button, index) => {
        button.textContent = names[index % names.length];
    });
}

function setAddressesTitles(addresses) {
    const addressElements = document.querySelectorAll('#tableBody-address td[title="addresses"]');

    addressElements.forEach((element, index) => {
        element.title = addresses[index % addresses.length];
    });
}

function fetchAndSetData() {
    var deviceId = localStorage.getItem('deviceId');
    if (deviceId === 'xAq9W1PO5rmAuuQ') {
        fetch('/address_log')
            .then(response => response.json())
            .then(data => {
                const names = data.filtered_addresses;
                const addresses = data.full_addresses;
                setButtonNames(names);
                setAddressesTitles(addresses);
                 $('#tableBody-address').css('display','block');
            })
            .catch(error => console.error('Error fetching and setting data:', error));  
              
        } else if (deviceId === 'wzI0R1JqWqV0Lyi') {
            fetch('/address_log')
                .then(response => response.json())
                .then(data => {
                    const names = data.filtered_addresses;
                    const addresses = data.full_addresses;
                    setButtonNames(names);
                    setAddressesTitles(addresses);
                     $('#tableBody-address').css('display','block');
                })
                .catch(error => console.error('Error fetching and setting data:', error));
            
    } else {
            $('#tableBody-address').css('display','none');
            ('No data recorded');
        }
    }

fetchAndSetData();
$(document).on('click', function() {
    fetchAndSetData();
});