What I Want:

I am trying to make it so when a member is added or removed from staff in my discord it will update it on the website I have. I've tried doing this with node.js, but then I can't use document attributes and etc. Basically I am wondering if this is possible.

Code JS:

const headBoardOfDirectors = document.querySelector('#hbod-role');
const boardOfDirectors = document.querySelector('#bod-role');
const headAdmin = document.querySelector('#ha-role');
const seniorAdmin = document.querySelector('#sa-role');
const admin = document.querySelector('#a-role');
const headModerator = document.querySelector('#hm-role');
const moderator = document.querySelector('#m-role');
const trialModerator = document.querySelector('#tm-role');

// Below is just an example of what I am talking about.

staff = [
    bunch of staff roles here
]

if (some member role add or remove event) {
    if (role added or removed is staff) {
        if (role name is Head Board of Directors) {
            headBoardOfDirectors.innerHTML = `${headBoardOfDirectors.innerHTML}\n${member name}`
        }
    }
}

Code HTML:

        <div id="staff">
            <table>
                <tr>
                    <th class="main"></th>
                    <th class="main">Staff</th>
                    <th class="main"></th>
                </tr>
                <tr>
                    <th></th>
                    <th>Founder</th>
                    <th></th>
                </tr>
                <tr>
                    <td></td>
                    <td>killrebeest#1001</td>
                    <td></td>
                </tr>
                <tr>
                    <th></th>
                    <th>Owner</th>
                    <th></th>
                </tr>
                <tr>
                    <td></td>
                    <td>fluffy#9459</td>
                    <td></td>
                </tr>
                <tr>
                    <th></th>
                    <th>Head of Board of Directors</th>
                    <th></th>
                </tr>
                <tr>
                    <td></td>
                    <td id="hbod-role"></td>
                    <td></td>
                </tr>
                <tr>
                    <th></th>
                    <th>Board of Directors</th>
                    <th></th>
                </tr>
                <tr id="bod-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Head Administration</th>
                    <th></th>
                </tr>
                <tr id="ha-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Senior Administration</th>
                    <th></th>
                </tr>
                <tr id="sa-role">
                    
                </tr>
                <tr>
                <tr>
                    <th></th>
                    <th>Administration</th>
                    <th></th>
                </tr>
                <tr id="a-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Head Moderation</th>
                    <th></th>
                </tr>
                <tr id="hm-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Moderation</th>
                    <th></th>
                </tr>
                <tr id="m-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Trial Moderation</th>
                    <th></th>
                </tr>
                <tr id="tm-role">
                    
                </tr>
            </table>
        </div>

Summary:

Basically I mainly want to know if this is possible, which I think it most definitly should be. If it is possible, how can the be done, or is there any references that you can answer with to help me solve this issue.

Thanks,
killrebeest