diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js
index e6da9661b6..b9ffc6127f 100644
--- a/web_src/js/features/repo-branch.js
+++ b/web_src/js/features/repo-branch.js
@@ -8,35 +8,35 @@ export function initRepoBranchButton() {
 
 function initRepoCreateBranchButton() {
   // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code)
-  $('.show-create-branch-modal').on('click', function () {
-    let modalFormName = $(this).attr('data-modal-form');
-    if (!modalFormName) {
-      modalFormName = '#create-branch-form';
-    }
-    $(modalFormName)[0].action = $(modalFormName).attr('data-base-action') + $(this).attr('data-branch-from-urlcomponent');
-    let fromSpanName = $(this).attr('data-modal-from-span');
-    if (!fromSpanName) {
-      fromSpanName = '#modal-create-branch-from-span';
-    }
+  for (const el of document.querySelectorAll('.show-create-branch-modal')) {
+    el.addEventListener('click', () => {
+      const modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form';
+      const modalForm = document.querySelector(modalFormName);
+      if (!modalForm) return;
+      modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`;
 
-    $(fromSpanName).text($(this).attr('data-branch-from'));
-    $($(this).attr('data-modal')).modal('show');
-  });
+      const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
+      document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from');
+
+      $(el.getAttribute('data-modal')).modal('show');
+    });
+  }
 }
 
 function initRepoRenameBranchButton() {
-  $('.show-rename-branch-modal').on('click', function () {
-    const target = $(this).attr('data-modal');
-    const $modal = $(target);
+  for (const el of document.querySelectorAll('.show-rename-branch-modal')) {
+    el.addEventListener('click', () => {
+      const target = el.getAttribute('data-modal');
+      const modal = document.querySelector(target);
+      const oldBranchName = el.getAttribute('data-old-branch-name');
+      modal.querySelector('input[name=from]').value = oldBranchName;
 
-    const oldBranchName = $(this).attr('data-old-branch-name');
-    $modal.find('input[name=from]').val(oldBranchName);
+      // display the warning that the branch which is chosen is the default branch
+      const warn = modal.querySelector('.default-branch-warning');
+      toggleElem(warn, el.getAttribute('data-is-default-branch') === 'true');
 
-    // display the warning that the branch which is chosen is the default branch
-    const $warn = $modal.find('.default-branch-warning');
-    toggleElem($warn, $(this).attr('data-is-default-branch') === 'true');
-
-    const $text = $modal.find('[data-rename-branch-to]');
-    $text.text($text.attr('data-rename-branch-to').replace('%s', oldBranchName));
-  });
+      const text = modal.querySelector('[data-rename-branch-to]');
+      text.textContent = text.getAttribute('data-rename-branch-to').replace('%s', oldBranchName);
+    });
+  }
 }