function mySolution() {
    const sendBtn = document.querySelector("#inputSection > div > button");
    const pendingQuestions = document.getElementById('pendingQuestions');
    const openQuestions = document.getElementById('openQuestions');

    sendBtn.addEventListener('click', () => {
        let question = document.querySelector('#inputSection > textarea').value;
        let username = document.querySelector("#inputSection > div > input[type=username]").value;
        createQuestion(true, question, username);
    });

    function createQuestion(isPending, question, username) {
        if(isPending) {
            pendingQuestions.innerHTML =
                `<h3>Pending Questions</h3>` +
                '<div class="pendingQuestion">' +
                    '<img src = "./images/user.png" width="32" height="32">' +
                    `<span>${username ? username : "Anonymous"}</span>` +
                    `<p>${question}</p>` +
                    '<div class="actions">' +
                        '<button class="archive">Archive</button>' +
                        '<button class="open">Open</button>' +
                    '</div>' +
                '</div>';
            const archiveBtn = document.querySelector("#pendingQuestions > div > div > button.archive");
            archiveBtn.addEventListener('click', function() {
                removeEl(this);
            });
            const openBtn = document.querySelector("#pendingQuestions > div > div > button.open");
            openBtn.addEventListener('click', function() {
                document.querySelector('#inputSection > textarea').value = '';
                document.querySelector("#inputSection > div > input[type=username]").value = '';
                removeEl(this);
                createQuestion(false, question, username);
            });
        } else {
            openQuestions.innerHTML =  `<h3>Open Questions</h3>` +
                '<div class="openQuestion">' +
                    '<img src = "./images/user.png" width="32" height="32">' +
                    `<span>${username ? username : "Anonymous"}</span>` +
                    `<p>${question}</p>` +
                        '<div class="actions">' +
                            '<button class="reply">Reply</button>' +
                        '</div>' +
                        '<div class="replySection" style="display: none;">' +
                            '<input class="replyInput" type="text" placeholder="Reply to this question here..."></input>' +
                            '<button class="replyButton">Send</button>' +
                            '<ol class="reply" type="1"></ol>' +
                        '</div>' +
                '</div>';
            const replyBtn = document.querySelector("#openQuestions > div > div.actions > button");
            replyBtn.addEventListener('click', function() {
                let replySection = document.querySelector("#openQuestions > div > div.replySection");
                if (replyBtn.textContent === 'Reply') {
                    replySection.style.display = 'block';
                    replyBtn.textContent = 'Back';
                } else {
                    replySection.style.display = 'none';
                    replyBtn.textContent = 'Reply';
                }

                const sendBtn = document.querySelector("#openQuestions > div > div.replySection > button.replyButton");

                sendBtn.addEventListener('click', () => {
                    let replyText = document.querySelector("#openQuestions > div > div.replySection > input.replyInput").value;
                    if (replyText) {
                        const answerList = document.querySelector("#openQuestions > div > div.replySection > ol.reply");
                        let li = document.createElement('li');
                        li.textContent = replyText;
                        answerList.appendChild(li);
                        document.querySelector("#openQuestions > div > div.replySection > input.replyInput").value = '';
                    }
                });
            });
        }
    }

    function removeEl(el) {
        let elementToRemove = el.parentNode.parentNode;
        elementToRemove.parentNode.removeChild(elementToRemove);
    }

}