Locked Profile

async function lockedProfile() {
    const response = await fetch('http://localhost:3030/jsonstore/advanced/profiles');
    const users = await response.json();
    document.querySelector('.profile').remove();

    for (const user in users) {
        const id = users[user]._id;
        const username = users[user].username;
        const email = users[user].email;
        const age = users[user].age;
        console.log(age);

        const personProfile = document.createElement('div');
        personProfile.classList.add('profile');
        personProfile.innerHTML = `
                <img src="./iconProfile2.png" class="userIcon">
                <label>Lock</label>
                <input type="radio" name="${id}" value="lock" checked>
                <label>Unlock</label>
                <input type="radio" name="${id}" value="unlock"><br>
                <hr>
                <label>Username</label>
                <input type="text" name="user1Username" value="${username}" disabled="" readonly="">
                <div class="user1Username">
                    <hr>
                    <label>Email:</label>
                    <input type="email" name="user1Email" value="${email}" disabled="" readonly="">
                    <label>Age:</label>
                    <input type="email" name="user1Age" value="${age}" disabled="" readonly="">
                </div>
                <button>Show more</button>
        `
        document.getElementById('main').appendChild(personProfile);
    }
    const extraInfo = Array.from(document.querySelectorAll('.user1Username'));
    extraInfo.forEach(person => person.style.display = "none");


    const showMoreBtns = document.querySelectorAll('button');
    showMoreBtns.forEach(button => button.addEventListener('click', showInfo));

    function showInfo(e) {
        const target = e.target.parentElement.children[9];
        const lockRadio = e.target.parentElement.children[2];
        const unlockRadio = e.target.parentElement.children[4];

        if (e.target.textContent === 'Hide it') {
            if (lockRadio.checked === true) {
                return;
            } else {
                target.style.display = 'none';
                e.target.textContent = 'Show more';
                return;
            }
        }

        if (lockRadio.checked === true) {
            return;
        } else {
            target.style.display = '';
            e.target.textContent = 'Hide it';
        }
    }
}