diff --git a/src/accounting/static/js/account-selector.js b/src/accounting/static/js/account-selector.js
index 897c38e..6b20c83 100644
--- a/src/accounting/static/js/account-selector.js
+++ b/src/accounting/static/js/account-selector.js
@@ -22,22 +22,23 @@
  */
 "use strict";
 
-// Initializes the page JavaScript.
-document.addEventListener("DOMContentLoaded", () => {
-    AccountSelector.initialize();
-});
-
 /**
  * The account selector.
  *
  */
 class AccountSelector {
 
+    /**
+     * The journal entry editor
+     * @type {JournalEntryEditor}
+     */
+    #entryEditor;
+
     /**
      * The entry type
      * @type {string}
      */
-    #entryType;
+    entryType;
 
     /**
      * The prefix of the HTML ID and class
@@ -81,20 +82,16 @@ class AccountSelector {
      */
     #more;
 
-    /**
-     * The journal entry editor
-     * @type {JournalEntryEditor}
-     */
-    #entryEditor;
-
     /**
      * Constructs an account selector.
      *
-     * @param modal {HTMLDivElement} the account selector modal
+     * @param entryEditor {JournalEntryEditor} the journal entry editor
+     * @param entryType {string} the entry type, either "debit" or "credit"
      */
-    constructor(modal) {
-        this.#entryType = modal.dataset.entryType;
-        this.#prefix = "accounting-account-selector-" + modal.dataset.entryType;
+    constructor(entryEditor, entryType) {
+        this.#entryEditor = entryEditor
+        this.entryType = entryType;
+        this.#prefix = "accounting-account-selector-" + entryType;
         this.#query = document.getElementById(this.#prefix + "-query");
         this.#queryNoResult = document.getElementById(this.#prefix + "-option-no-result");
         this.#optionList = document.getElementById(this.#prefix + "-option-list");
@@ -146,7 +143,7 @@ class AccountSelector {
      * @return {string[]} the account codes that are used in the form
      */
     #getCodesUsedInForm() {
-        const inUse = this.#entryEditor.form.getAccountCodesUsed(this.#entryType);
+        const inUse = this.#entryEditor.form.getAccountCodesUsed(this.entryType);
         if (this.#entryEditor.accountCode !== null) {
             inUse.push(this.#entryEditor.accountCode);
         }
@@ -187,21 +184,19 @@ class AccountSelector {
     /**
      * The callback when the account selector is shown.
      *
-     * @param entryEditor {JournalEntryEditor} the journal entry editor
      */
-    #onOpen(entryEditor) {
-        this.#entryEditor = entryEditor;
+    onOpen() {
         this.#query.value = "";
         this.#more.classList.remove("d-none");
         this.#filterOptions();
         for (const option of this.#options) {
-            if (option.dataset.code === entryEditor.accountCode) {
+            if (option.dataset.code === this.#entryEditor.accountCode) {
                 option.classList.add("active");
             } else {
                 option.classList.remove("active");
             }
         }
-        if (entryEditor.accountCode === null) {
+        if (this.#entryEditor.accountCode === null) {
             this.#clearButton.classList.add("btn-secondary");
             this.#clearButton.classList.remove("btn-danger");
             this.#clearButton.disabled = true;
@@ -211,31 +206,4 @@ class AccountSelector {
             this.#clearButton.disabled = false;
         }
     }
-
-    /**
-     * The account selectors.
-     * @type {{debit: AccountSelector, credit: AccountSelector}}
-     */
-    static #selectors = {}
-
-    /**
-     * Initializes the account selectors.
-     *
-     */
-    static initialize() {
-        const modals = Array.from(document.getElementsByClassName("accounting-account-selector-modal"));
-        for (const modal of modals) {
-            const selector = new AccountSelector(modal);
-            this.#selectors[selector.#entryType] = selector;
-        }
-    }
-
-    /**
-     * Starts the account selector.
-     *
-     * @param entryEditor {JournalEntryEditor} the journal entry editor
-     */
-    static start(entryEditor) {
-        this.#selectors[entryEditor.entryType].#onOpen(entryEditor);
-    }
 }
diff --git a/src/accounting/static/js/journal-entry-editor.js b/src/accounting/static/js/journal-entry-editor.js
index a3b6a82..6f28b2b 100644
--- a/src/accounting/static/js/journal-entry-editor.js
+++ b/src/accounting/static/js/journal-entry-editor.js
@@ -202,6 +202,12 @@ class JournalEntryEditor {
      */
     #summaryEditors;
 
+    /**
+     * The account selectors
+     * @type {{debit: AccountSelector, credit: AccountSelector}}
+     */
+    #accountSelectors;
+
     /**
      * Constructs a new journal entry editor.
      *
@@ -225,10 +231,11 @@ class JournalEntryEditor {
         this.#amount = document.getElementById(this.#prefix + "-amount");
         this.#amountError = document.getElementById(this.#prefix + "-amount-error");
         this.#summaryEditors = this.#initializeSummaryEditors();
+        this.#accountSelectors = this.#initializeAccountSelectors();
         this.#originalEntryControl.onclick = () => OriginalEntrySelector.start(this, this.originalEntryId);
         this.#originalEntryDelete.onclick = () => this.clearOriginalEntry();
         this.#summaryControl.onclick = () => this.#summaryEditors[this.entryType].onOpen();
-        this.#accountControl.onclick = () => AccountSelector.start(this);
+        this.#accountControl.onclick = () => this.#accountSelectors[this.entryType].onOpen();
         this.#amount.onchange = () => this.#validateAmount();
         this.#element.onsubmit = () => {
             if (this.#validate()) {
@@ -258,6 +265,19 @@ class JournalEntryEditor {
         return editors;
     }
 
+    /**
+     * Initializes the account selectors.
+     *
+     * @return {{debit: AccountSelector, credit: AccountSelector}} the account selectors
+     */
+    #initializeAccountSelectors() {
+        const selectors = {};
+        for (const entryType of ["debit", "credit"]) {
+            selectors[entryType] = new AccountSelector(this, entryType);
+        }
+        return selectors;
+    }
+
     /**
      * Saves the original entry from the original entry selector.
      *
diff --git a/src/accounting/templates/accounting/transaction/include/account-selector-modal.html b/src/accounting/templates/accounting/transaction/include/account-selector-modal.html
index 4697e35..a9da23e 100644
--- a/src/accounting/templates/accounting/transaction/include/account-selector-modal.html
+++ b/src/accounting/templates/accounting/transaction/include/account-selector-modal.html
@@ -19,7 +19,7 @@ account-selector-modal.html: The modal for the account selector
 Author: imacat@mail.imacat.idv.tw (imacat)
 First written: 2023/2/25
 #}
-<div id="accounting-account-selector-{{ entry_type }}-modal" class="modal fade accounting-account-selector-modal" data-entry-type="{{ entry_type }}" tabindex="-1" aria-labelledby="accounting-account-selector-{{ entry_type }}-modal-label" aria-hidden="true">
+<div id="accounting-account-selector-{{ entry_type }}-modal" class="modal fade" data-entry-type="{{ entry_type }}" tabindex="-1" aria-labelledby="accounting-account-selector-{{ entry_type }}-modal-label" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">