diff --git a/src/main/resources/io/jenkins/plugins/folderauth/FolderAuthorizationStrategyManagementLink/index.jelly b/src/main/resources/io/jenkins/plugins/folderauth/FolderAuthorizationStrategyManagementLink/index.jelly
index 3236bf6..a5ab491 100644
--- a/src/main/resources/io/jenkins/plugins/folderauth/FolderAuthorizationStrategyManagementLink/index.jelly
+++ b/src/main/resources/io/jenkins/plugins/folderauth/FolderAuthorizationStrategyManagementLink/index.jelly
@@ -35,10 +35,10 @@
                                         <input id="assign-sid-global-${index}" type="text"/>
                                     </div>
                                     <div class="center" style="margin-top: 5px">
-                                        <button type="button" class="submit-button" onclick="assignSid('global', ${index})">
+                                        <button type="button" class="sid-action-button submit-button" data-action="assignSid" data-index="${index}" data-role-type="global">
                                             ${%assign}
                                         </button>
-                                        <button type="button" class="submit-button" onclick="removeSid('global', ${index})">
+                                        <button type="button" class="sid-action-button submit-button" data-action="removeSid" data-index="${index}" data-role-type="global">
                                             ${%remove}
                                         </button>
                                     </div>
@@ -53,8 +53,8 @@
                                         </j:forEach>
                                     </ul>
                                 </div>
-                                <form method="POST" action="${rootURL}/${it.urlName}/deleteGlobalRole"
-                                      onsubmit="return confirm('${%confirmDelete}');">
+                                <form method="POST" action="${rootURL}/${it.urlName}/deleteGlobalRole" class="delete-role-form"
+                                      data-confirm-delete-text="${%confirmDelete}">
                                     <input type="hidden" name="roleName" value="${globalRole.name}"/>
                                     <input type="submit" value="X" class="delete-role"/>
                                 </form>
@@ -82,7 +82,7 @@
                             </option>
                         </j:forEach>
                     </select>
-                    <button type="button" onclick="addGlobalRole();" class="submit-button">
+                    <button type="button" data-action="addGlobalRole" class="add-role-button submit-button">
                         ${%addRole}
                     </button>
                 </div>
@@ -123,10 +123,10 @@
                                             <input id="assign-sid-folder-${index}" type="text" name="sid"/>
                                         </div>
                                         <div class="center" style="margin-top: 5px;">
-                                            <button type="button" class="submit-button" onclick="assignSid('folder', ${index})">
+                                            <button type="button" class="sid-action-button submit-button" data-action="assignSid" data-index="${index}" data-role-type="folder">
                                                 ${%assign}
                                             </button>
-                                            <button type="button" class="submit-button" onclick="removeSid('folder', ${index})">
+                                            <button type="button" class="sid-action-button submit-button" data-action="removeSid" data-index="${index}" data-role-type="folder">
                                                 ${%remove}
                                             </button>
                                         </div>
@@ -141,8 +141,8 @@
                                             </j:forEach>
                                         </ul>
                                     </div>
-                                    <form method="POST" action="${rootURL}/${it.urlName}/deleteFolderRole"
-                                          onsubmit="return confirm('${%confirmDelete}');">
+                                    <form method="POST" action="${rootURL}/${it.urlName}/deleteFolderRole" class="delete-role-form"
+                                          data-confirm-delete-text="${%confirmDelete}">
                                         <input type="hidden" name="roleName" value="${folderRole.name}"/>
                                         <input type="submit" value="X" class="delete-role"/>
                                     </form>
@@ -163,10 +163,6 @@
                         </label>
                     </div>
                     <div class="form-row">
-                        <script>
-                            // asynchronously render folder names
-                            getFolders();
-                        </script>
                         <label class="form-label" for="folder-select">
                             ${%applyOn}:
                         </label>
@@ -188,8 +184,8 @@
                         </j:forEach>
                     </select>
                     <div class="form-row">
-                        <button id="add-folder-role-button" type="button" class="submit-button"
-                                onclick="addFolderRole();" disabled="disabled">
+                        <button id="add-folder-role-button" type="button" class="add-role-button submit-button"
+                                data-action="addFolderRole" disabled="disabled">
                             ${%addRole}
                         </button>
                     </div>
@@ -231,10 +227,10 @@
                                             <input id="assign-sid-agent-${index}" type="text"/>
                                         </div>
                                         <div class="center" style="margin-top: 10px;">
-                                            <button type="button" class="submit-button" onclick="assignSid('agent', ${index})">
+                                            <button type="button" class="sid-action-button submit-button" data-action="assignSid" data-index="${index}" data-role-type="agent">
                                                 ${%assign}
                                             </button>
-                                            <button type="button" class="submit-button" onclick="removeSid('agent', ${index})">
+                                            <button type="button" class="sid-action-button submit-button" data-action="removeSid" data-index="${index}" data-role-type="agent">
                                                 ${%remove}
                                             </button>
                                         </div>
@@ -249,8 +245,8 @@
                                             </j:forEach>
                                         </ul>
                                     </div>
-                                    <form method="POST" action="${rootURL}/${it.urlName}/deleteAgentRole"
-                                          onsubmit="return confirm('${%confirmDelete}');">
+                                    <form method="POST" action="${rootURL}/${it.urlName}/deleteAgentRole" class="delete-role-form"
+                                          data-confirm-delete-text="${%confirmDelete}">
                                         <input type="hidden" name="roleName" value="${agentRole.name}"/>
                                         <input type="submit" value="X" class="delete-role"/>
                                     </form>
@@ -291,7 +287,7 @@
                         </j:forEach>
                     </select>
                     <div class="form-row">
-                        <button type="button" class="submit-button" onclick="addAgentRole();">${%addRole}</button>
+                        <button type="button" class="add-role-button submit-button" data-action="addAgentRole">${%addRole}</button>
                     </div>
                 </div>
             </div>
diff --git a/src/main/webapp/js/addrole.js b/src/main/webapp/js/addrole.js
index c42663d..049b2ac 100644
--- a/src/main/webapp/js/addrole.js
+++ b/src/main/webapp/js/addrole.js
@@ -4,7 +4,7 @@
 /**
  * Adds a global role
  */
-const addGlobalRole = () => {
+function addGlobalRole() {
     const roleName = document.getElementById('globalRoleName').value;
     if (!roleName || roleName.length < 3) {
         alert('Please enter a valid name for the role to be added.');
@@ -13,7 +13,9 @@ const addGlobalRole = () => {
 
     const response = {
         name: roleName,
-        permissions: document.getElementById('global-permission-select').getValue(),
+        permissions: Array.from(document.getElementById('global-permission-select').options)
+            .filter(option => option.selected)
+            .map(option => option.value)
     };
 
     if (response.permissions.length <= 0) {
@@ -28,7 +30,7 @@ const addGlobalRole = () => {
 /**
  * Adds a Folder Role
  */
-const addFolderRole = () => {
+function addFolderRole() {
     const roleName = document.getElementById('folderRoleName').value;
     if (!roleName || roleName.length < 3) {
         alert('Please enter a valid name for the role to be added');
@@ -37,8 +39,12 @@ const addFolderRole = () => {
 
     const response = {
         name: roleName,
-        permissions: document.getElementById('folder-permission-select').getValue(),
-        folderNames: document.getElementById('folder-select').getValue(),
+        permissions: Array.from(document.getElementById('folder-permission-select').options)
+            .filter(option => option.selected)
+            .map(option => option.value),
+        folderNames: Array.from(document.getElementById('folder-select').options)
+            .filter(option => option.selected)
+            .map(option => option.value)
     };
 
     if (!response.permissions || response.permissions.length <= 0) {
@@ -58,7 +64,7 @@ const addFolderRole = () => {
 /**
  * Adds an agent Role
  */
-const addAgentRole = () => {
+function addAgentRole() {
     const roleName = document.getElementById('agentRoleName').value;
     if (!roleName || roleName.length < 3) {
         alert('Please enter a valid name for the role to be added');
@@ -67,8 +73,12 @@ const addAgentRole = () => {
 
     const response = {
         name: roleName,
-        agentNames: document.getElementById('agent-select').getValue(),
-        permissions: document.getElementById('agent-permission-select').getValue(),
+        agentNames: Array.from(document.getElementById('agent-select').options)
+            .filter(option => option.selected)
+            .map(option => option.value),
+        permissions: Array.from(document.getElementById('agent-permission-select').options)
+            .filter(option => option.selected)
+            .map(option => option.value)
     };
 
     if (!response.permissions || response.permissions.length <= 0) {
@@ -109,3 +119,21 @@ const sendPostRequest = (postUrl, json) => {
 
     xhr.send(JSON.stringify(json));
 };
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".add-role-button").forEach((button) => {
+        button.addEventListener("click", (event) => {
+            const { action } = event.target.dataset;
+
+            window[action]();
+        });
+    });
+
+    document.querySelectorAll(".delete-role-form").forEach((form) => {
+        form.addEventListener("submit", (event) => {
+            if (!confirm(event.target.dataset.confirmDeleteText)) {
+                event.preventDefault();
+            }
+        });
+    })
+});
diff --git a/src/main/webapp/js/folders.js b/src/main/webapp/js/folders.js
index 4c980e6..7aa7041 100644
--- a/src/main/webapp/js/folders.js
+++ b/src/main/webapp/js/folders.js
@@ -46,3 +46,7 @@ const renderFoldersAsOptions = (folders) => {
     // enable submitting the form
     document.getElementById('add-folder-role-button').removeAttribute('disabled');
 };
+
+document.addEventListener("DOMContentLoaded", () => {
+    getFolders();
+});
diff --git a/src/main/webapp/js/managesids.js b/src/main/webapp/js/managesids.js
index 0c1f50c..fb6e5f3 100644
--- a/src/main/webapp/js/managesids.js
+++ b/src/main/webapp/js/managesids.js
@@ -72,3 +72,15 @@ function removeSid(roleType, index) {
     request.setRequestHeader('Jenkins-Crumb', crumb.value);
     request.send(formData);
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".sid-action-button").forEach((button) => {
+        button.addEventListener("click", (event) => {
+            const data = event.target.dataset;
+            const index = parseInt(data.index);
+            const { roleType, action } = data;
+
+            window[action](roleType, index);
+        });
+    })
+});