From 09c1f453f421a219b2121cc11aaa4ce3c013449d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Fri, 7 Aug 2020 22:31:08 +0800
Subject: [PATCH] Replaced parsing the HTML element ID with the HTML custom
 data attributes in the JavaScripts.

---
 .../static/accounting/js/summary-helper.js    | 45 +++++--------
 .../static/accounting/js/transaction-form.js  | 64 +++++++++----------
 .../include/form-record-non-transfer.html     | 12 ++--
 .../include/form-record-transfer.html         | 10 +--
 .../accounting/include/summary-helper.html    | 10 +--
 .../accounting/transactions/expense/form.html |  2 +-
 .../accounting/transactions/income/form.html  |  2 +-
 .../transactions/transfer/form.html           |  6 +-
 mia_core/static/mia_core/js/period-chooser.js | 25 ++------
 .../mia_core/include/period-chooser.html      |  8 +--
 10 files changed, 81 insertions(+), 103 deletions(-)

diff --git a/accounting/static/accounting/js/summary-helper.js b/accounting/static/accounting/js/summary-helper.js
index 8b35294..92009b5 100644
--- a/accounting/static/accounting/js/summary-helper.js
+++ b/accounting/static/accounting/js/summary-helper.js
@@ -30,7 +30,7 @@ $(function () {
         });
     $(".record-summary")
         .on("click", function () {
-            startSummaryHelper(this);
+            startSummaryHelper($(this));
         });
     $("#summary-summary")
         .on("change", function () {
@@ -39,7 +39,7 @@ $(function () {
         });
     $(".summary-tab")
         .on("click", function () {
-            switchSummaryTab(this);
+            switchSummaryTab($(this));
         });
     // The general categories
     $("#summary-general-category")
@@ -136,17 +136,17 @@ function loadSummaryCategoryData() {
 /**
  * Starts the summary helper.
  *
- * @param {HTMLInputElement} summary the summary input element
+ * @param {jQuery} summary the summary input element
  */
 function startSummaryHelper(summary) {
-    const type = summary.id.substring(0, summary.id.indexOf("-"));
-    const no = parseInt(summary.id.substring(type.length + 1, summary.id.indexOf("-", type.length + 1)));
-    $("#summary-record").get(0).value = type + "-" + no;
-    $("#summary-summary").get(0).value = summary.value;
+    const type = summary.data("type");
+    const no = summary.data("no");
+    $("#summary-record").val(type + "-" + no);
+    $("#summary-summary").val(summary.val());
     // Loads the know summary categories into the summary helper
     loadKnownSummaryCategories(type);
     // Parses the summary and sets up the summary helper
-    parseSummaryForHelper(summary.value);
+    parseSummaryForHelper(summary.val());
     // Focus on the summary input
     setTimeout(function () {
         $("#summary-summary").get(0).focus();
@@ -274,7 +274,7 @@ function parseSummaryForCategoryHelpers(summary) {
         $("#summary-bus-route").get(0).value = matchBus[2];
         $("#summary-bus-from").get(0).value = matchBus[3];
         $("#summary-bus-to").get(0).value = matchBus[4];
-        switchSummaryTab($("#summary-tab-bus").get(0));
+        switchSummaryTab($("#summary-tab-bus"));
         return;
     }
 
@@ -288,12 +288,12 @@ function parseSummaryForCategoryHelpers(summary) {
         $("#summary-travel-direction").get(0).value = matchTravel[3];
         setSummaryTravelDirectionButtons(matchTravel[3]);
         $("#summary-travel-to").get(0).value = matchTravel[4];
-        switchSummaryTab($("#summary-tab-travel").get(0));
+        switchSummaryTab($("#summary-tab-travel"));
         return;
     }
 
     // A general category
-    const generalCategoryTab = $("#summary-tab-category").get(0);
+    const generalCategoryTab = $("#summary-tab-category");
     const matchCategory = summary.match(/^(.+)—.+(?:×[0-9]+)?$/);
     if (matchCategory !== null) {
         $("#summary-general-category").get(0).value = matchCategory[1];
@@ -312,26 +312,15 @@ function parseSummaryForCategoryHelpers(summary) {
 /**
  * Switch the summary helper to tab.
  *
- * @param {HTMLElement} tab the navigation tab corresponding to a type
- *                          of helper
+ * @param {jQuery} tab the navigation tab corresponding to a type
+ *                     of helper
  * @private
  */
 function switchSummaryTab(tab) {
-    const tabName = tab.id.substr("summary-tab-".length);  // "summary-tab-"
-    $(".summary-tab-content").each(function () {
-        if (this.id === "summary-tab-content-" + tabName) {
-            this.classList.remove("d-none");
-        } else {
-            this.classList.add("d-none");
-        }
-    });
-    $(".summary-tab").each(function () {
-        if (this.id === tab.id) {
-            this.classList.add("active");
-        } else {
-            this.classList.remove("active");
-        }
-    });
+    $(".summary-tab-content").addClass("d-none");
+    $("#summary-tab-content-" + tab.data("tab")).removeClass("d-none");
+    $(".summary-tab").removeClass("active");
+    tab.addClass("active");
 }
 
 /**
diff --git a/accounting/static/accounting/js/transaction-form.js b/accounting/static/accounting/js/transaction-form.js
index 41d860f..9808e3b 100644
--- a/accounting/static/accounting/js/transaction-form.js
+++ b/accounting/static/accounting/js/transaction-form.js
@@ -45,7 +45,7 @@ $(function () {
             validateAmount(this);
         })
         .on("change", function () {
-            updateTotalAmount(this);
+            updateTotalAmount($(this));
             validateBalance();
         });
     $("#txn-note")
@@ -58,11 +58,11 @@ $(function () {
         });
     $(".btn-new")
         .on("click", function () {
-            addNewRecord(this);
+            addNewRecord($(this));
         });
     $(".btn-del-record")
         .on("click", function () {
-            deleteRecord(this);
+            deleteRecord($(this));
         });
 });
 
@@ -95,7 +95,7 @@ function getAccountOptions() {
         if (this.readyState === 4 && this.status === 200) {
             accountOptions = JSON.parse(this.responseText);
             $(".record-account").each(function () {
-                initializeAccountOptions(this);
+                initializeAccountOptions($(this));
             });
         }
     };
@@ -106,27 +106,26 @@ function getAccountOptions() {
 /**
  * Initialize the account options.
  *
- * @param {HTMLSelectElement} account the account select element
+ * @param {jQuery} account the account select element
  * @private
  */
 function initializeAccountOptions(account) {
-    const jAccount = $(account);
-    const type = account.id.substring(0, account.id.indexOf("-"));
-    const selectedAccount = account.value;
+    const type = account.data("type");
+    const selectedAccount = account.val();
     let isCash = false;
     if (type === "debit") {
         isCash = ($(".credit-record").length === 0);
     } else if (type === "credit") {
         isCash = ($(".debit-record").length === 0);
     }
-    jAccount.html("");
+    account.html("");
     if (selectedAccount === "") {
-        jAccount.append($("<option/>"));
+        account.append($("<option/>"));
     }
     const headerInUse = $("<option/>")
         .attr("disabled", "disabled")
         .text(accountOptions["header_in_use"]);
-    jAccount.append(headerInUse);
+    account.append(headerInUse);
     accountOptions[type + "_in_use"].forEach(function (item) {
         // Skips the cash account on cash transactions.
         if (item["code"] === 1111 && isCash) {
@@ -138,12 +137,12 @@ function initializeAccountOptions(account) {
         if (String(item["code"]) === selectedAccount) {
             option.attr("selected", "selected");
         }
-        jAccount.append(option);
+        account.append(option);
     });
     const headerNotInUse = $("<option/>")
         .attr("disabled", "disabled")
         .text(accountOptions["header_not_in_use"]);
-    jAccount.append(headerNotInUse);
+    account.append(headerNotInUse);
     accountOptions[type + "_not_in_use"].forEach(function (item) {
         const option = $("<option/>")
             .attr("value", item["code"])
@@ -151,7 +150,7 @@ function initializeAccountOptions(account) {
         if (String(item["code"]) === selectedAccount) {
             option.attr("selected", "selected");
         }
-        jAccount.append(option);
+        account.append(option);
     });
 }
 
@@ -172,16 +171,12 @@ function removeBlankOption(select) {
 /**
  * Updates the total amount.
  *
- * @param {HTMLButtonElement|HTMLInputElement} element the amount
- *                                                     element that
- *                                                     changed, or the
- *                                                     button that
- *                                                     was hit to
- *                                                     delete a record
+ * @param {jQuery} element the amount element that changed, or the
+ *                         button that was hit to delete a record
  * @private
  */
 function updateTotalAmount(element) {
-    const type = element.id.substring(0, element.id.indexOf("-"));
+    const type = element.data("type")
     let total = 0;
     $("." + type + "-to-sum").each(function () {
         if (this.value !== "") {
@@ -198,16 +193,16 @@ function updateTotalAmount(element) {
 /**
  * Adds a new accounting record.
  *
- * @param {HTMLButtonElement} button the button element that was hit
- *                                   to add a new record
+ * @param {jQuery} button the button element that was hit to add a
+ *                        new record
  * @private
  */
 function addNewRecord(button) {
-    const type = button.id.substring(0, button.id.indexOf("-"));
+    const type = button.data("type");
     // Finds the new number that is the maximum number plus 1.
     let newNo = 0;
     $("." + type + "-record").each(function () {
-        const no = parseInt(this.id.substring(type.length + 1));
+        const no = parseInt($(this).data("no"));
         if (newNo < no) {
             newNo = no;
         }
@@ -242,7 +237,7 @@ function insertNewRecord(type, newNo) {
             validateAccount(this);
         })
         .each(function () {
-            initializeAccountOptions(this);
+            initializeAccountOptions($(this));
         });
     $("#" + type + "-" + newNo + "-summary")
         .on("blur", function () {
@@ -258,25 +253,30 @@ function insertNewRecord(type, newNo) {
             validateAmount(this);
         })
         .on("change", function () {
-            updateTotalAmount(this);
+            updateTotalAmount($(this));
             validateBalance();
         });
     $("#" + type + "-" + newNo + "-delete")
         .on("click", function () {
-            deleteRecord(this);
+            deleteRecord($(this));
+        });
+    $("#" + type + "-" + newNo + "-m-delete")
+        .on("click", function () {
+            deleteRecord($(this));
         });
 }
 
 /**
  * Deletes a record.
  *
- * @param {HTMLButtonElement} button the button element that was hit
- *                            to delete this record
+ * @param {jQuery} button the button element that was hit to delete
+ *                        this record
  * @private
  */
 function deleteRecord(button) {
-    const type = button.id.substring(0, button.id.indexOf("-"));
-    const no = parseInt(button.id.substring(type.length + 1, button.id.indexOf("-", type.length + 1)));
+    const type = button.data("type");
+    const no = button.data("no");
+    console.log("#" + type + "-" + no);
     $("#" + type + "-" + no).remove();
     resetRecordOrders(type);
     resetRecordButtons();
diff --git a/accounting/templates/accounting/include/form-record-non-transfer.html b/accounting/templates/accounting/include/form-record-non-transfer.html
index 1851600..645b19d 100644
--- a/accounting/templates/accounting/include/form-record-non-transfer.html
+++ b/accounting/templates/accounting/include/form-record-non-transfer.html
@@ -20,14 +20,14 @@ Author: imacat@mail.imacat.idv.tw (imacat)
 First written: 2020/8/5
 {% endcomment %}
 
-<li id="{{ record_type }}-{{ no }}" class="list-group-item d-flex justify-content-between draggable-record {{ record_type }}-record">
+<li id="{{ record_type }}-{{ no }}" class="list-group-item d-flex justify-content-between draggable-record {{ record_type }}-record" data-no="{{ no }}">
   <div class="row">
     <div class="col-lg-6">
       {% if record.id.value %}
         <input type="hidden" name="{{ record_type }}-{{ no }}-id" value="{{ record.id.value }}" />
       {% endif %}
       <input id="{{ record_type }}-{{ no }}-ord" class="{{ record_type }}-ord" type="hidden" name="{{ record_type }}-{{ no }}-ord" value="{{ order }}" />
-      <select id="{{ record_type }}-{{ no }}-account" class="form-control record-account {{ record_type }}-account {% if should_validate and record.account.errors %} is-invalid {% endif %}" name="{{ record_type }}-{{ no }}-account">
+      <select id="{{ record_type }}-{{ no }}-account" class="form-control record-account {{ record_type }}-account {% if should_validate and record.account.errors %} is-invalid {% endif %}" name="{{ record_type }}-{{ no }}-account" data-type="{{ record_type }}">
         {% if record.account is not None %}
           <option value="{{ record.account.value|default:"" }}" selected="selected">{{ record.account.value|default:"" }} {{ record.account_title|default:"" }}</option>
         {% else %}
@@ -40,11 +40,11 @@ First written: 2020/8/5
     <div class="col-lg-6">
       <div class="row">
         <div class="col-sm-8">
-          <input id="{{ record_type }}-{{ no }}-summary" class="form-control record-summary {% if should_validate and record.summary.errors %} is-invalid {% endif %}" type="text" name="{{ record_type }}-{{ no }}-summary" value="{{ record.summary.value|default:"" }}" maxlength="128" data-toggle="modal" data-target="#summary-modal" />
+          <input id="{{ record_type }}-{{ no }}-summary" class="form-control record-summary {% if should_validate and record.summary.errors %} is-invalid {% endif %}" type="text" name="{{ record_type }}-{{ no }}-summary" value="{{ record.summary.value|default:"" }}" maxlength="128" data-toggle="modal" data-target="#summary-modal" data-type="{{ record_type }}" data-no="{{ no }}" />
           <div id="{{ record_type }}-{{ no }}-summary-error" class="invalid-feedback">{% if should_validate %}{{ record.summary.errors.0|default:"" }}{% endif %}</div>
         </div>
         <div class="col-sm-4">
-          <input id="{{ record_type }}-{{ no }}-amount" class="form-control record-amount {{ record_type }}-to-sum {% if should_validate and record.amount.errors %} is-invalid {% endif %}" type="number" min="1" name="{{ record_type }}-{{ no }}-amount" value="{{ record.amount.value|default:"" }}" required="required" />
+          <input id="{{ record_type }}-{{ no }}-amount" class="form-control record-amount {{ record_type }}-to-sum {% if should_validate and record.amount.errors %} is-invalid {% endif %}" type="number" min="1" name="{{ record_type }}-{{ no }}-amount" value="{{ record.amount.value|default:"" }}" required="required" data-type="{{ record_type }}" />
           <div id="{{ record_type }}-{{ no }}-amount-error" class="invalid-feedback">{% if should_validate %}{{ record.amount.errors.0|default:"" }}{% endif %}</div>
         </div>
       </div>
@@ -55,7 +55,7 @@ First written: 2020/8/5
       <button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
         <i class="fas fa-sort"></i>
       </button>
-      <button id="{{ record_type }}-{{ no }}-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}">
+      <button id="{{ record_type }}-{{ no }}-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}" data-type="{{ record_type }}" data-no="{{ no }}">
         <i class="fas fa-trash"></i>
       </button>
     </div>
@@ -63,7 +63,7 @@ First written: 2020/8/5
       <button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
         <i class="fas fa-sort"></i>
       </button>
-      <button id="{{ record_type }}-{{ no }}-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}">
+      <button id="{{ record_type }}-{{ no }}-m-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}" data-type="{{ record_type }}" data-no="{{ no }}">
         <i class="fas fa-trash"></i>
       </button>
     </div>
diff --git a/accounting/templates/accounting/include/form-record-transfer.html b/accounting/templates/accounting/include/form-record-transfer.html
index 92ea9c7..fa8c4ca 100644
--- a/accounting/templates/accounting/include/form-record-transfer.html
+++ b/accounting/templates/accounting/include/form-record-transfer.html
@@ -20,7 +20,7 @@ Author: imacat@mail.imacat.idv.tw (imacat)
 First written: 2020/8/5
 {% endcomment %}
 
-<li id="{{ record_type }}-{{ no }}" class="list-group-item d-flex draggable-record {{ record_type }}-record">
+<li id="{{ record_type }}-{{ no }}" class="list-group-item d-flex draggable-record {{ record_type }}-record" data-no="{{ no }}">
   <div>
     <div class="row">
       <div class="col-sm-12">
@@ -28,7 +28,7 @@ First written: 2020/8/5
           <input type="hidden" name="{{ record_type }}-{{ no }}-id" value="{{ record.id.value }}" />
         {% endif %}
         <input id="{{ record_type }}-{{ no }}-ord" class="{{ record_type }}-ord" type="hidden" name="{{ record_type }}-{{ no }}-ord" value="{{ order }}" />
-        <select id="{{ record_type }}-{{ no }}-account" class="form-control record-account {{ record_type }}-account {% if should_validate and record.account.errors %} is-invalid {% endif %}" name="{{ record_type }}-{{ no }}-account">
+        <select id="{{ record_type }}-{{ no }}-account" class="form-control record-account {{ record_type }}-account {% if should_validate and record.account.errors %} is-invalid {% endif %}" name="{{ record_type }}-{{ no }}-account" data-type="{{ record_type }}">
           {% if record.account is not None %}
             <option value="{{ record.account.value|default:"" }}" selected="selected">{{ record.account.value|default:"" }} {{ record.account_title|default:"" }}</option>
           {% else %}
@@ -41,11 +41,11 @@ First written: 2020/8/5
     </div>
     <div class="row">
       <div class="col-lg-8">
-        <input id="{{ record_type }}-{{ no }}-summary" class="form-control record-summary {% if should_validate and record.summary.errors %} is-invalid {% endif %}" type="text" name="{{ record_type }}-{{ no }}-summary" value="{{ record.summary.value|default:"" }}" maxlength="128" data-toggle="modal" data-target="#summary-modal" />
+        <input id="{{ record_type }}-{{ no }}-summary" class="form-control record-summary {% if should_validate and record.summary.errors %} is-invalid {% endif %}" type="text" name="{{ record_type }}-{{ no }}-summary" value="{{ record.summary.value|default:"" }}" maxlength="128" data-toggle="modal" data-target="#summary-modal" data-type="{{ record_type }}" data-no="{{ no }}" />
         <div id="{{ record_type }}-{{ no }}-summary-error" class="invalid-feedback">{% if should_validate %}{{ record.summary.errors.0|default:"" }}{% endif %}</div>
       </div>
       <div class="col-lg-4">
-        <input id="{{ record_type }}-{{ no }}-amount" class="form-control record-amount {{ record_type }}-to-sum {% if should_validate and record.amount.errors %} is-invalid {% endif %}" type="number" min="1" name="{{ record_type }}-{{ no }}-amount" value="{{ record.amount.value|default:"" }}" required="required" />
+        <input id="{{ record_type }}-{{ no }}-amount" class="form-control record-amount {{ record_type }}-to-sum {% if should_validate and record.amount.errors %} is-invalid {% endif %}" type="number" min="1" name="{{ record_type }}-{{ no }}-amount" value="{{ record.amount.value|default:"" }}" required="required" data-type="{{ record_type }}" />
         <div id="{{ record_type }}-{{ no }}-amount-error" class="invalid-feedback">{% if should_validate %}{{ record.amount.errors.0|default:"" }}{% endif %}</div>
       </div>
     </div>
@@ -55,7 +55,7 @@ First written: 2020/8/5
       <button class="btn btn-outline-secondary btn-sort-{{ record_type }}" type="button">
         <i class="fas fa-sort"></i>
       </button>
-      <button id="{{ record_type }}-{{ no }}-m-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}">
+      <button id="{{ record_type }}-{{ no }}-m-delete" type="button" class="btn btn-danger btn-del-record btn-del-{{ record_type }}" data-type="{{ record_type }}" data-no="{{ no }}">
         <i class="fas fa-trash"></i>
       </button>
     </div>
diff --git a/accounting/templates/accounting/include/summary-helper.html b/accounting/templates/accounting/include/summary-helper.html
index f0bd1b4..b1c1b35 100644
--- a/accounting/templates/accounting/include/summary-helper.html
+++ b/accounting/templates/accounting/include/summary-helper.html
@@ -47,19 +47,19 @@ First written: 2020/4/3
           </div>
           <ul class="nav nav-tabs">
             <li class="nav-item">
-              <span id="summary-tab-category" class="summary-tab nav-link active">{{ _("General")|force_escape }}</span>
+              <span id="summary-tab-category" class="summary-tab nav-link active" data-tab="category">{{ _("General")|force_escape }}</span>
             </li>
             <li class="nav-item">
-              <span id="summary-tab-travel" class="summary-tab nav-link">{{ _("Travel")|force_escape }}</span>
+              <span id="summary-tab-travel" class="summary-tab nav-link" data-tab="travel">{{ _("Travel")|force_escape }}</span>
             </li>
             <li class="nav-item">
-              <span id="summary-tab-bus" class="summary-tab nav-link">{{ _("Bus")|force_escape }}</span>
+              <span id="summary-tab-bus" class="summary-tab nav-link" data-tab="bus">{{ _("Bus")|force_escape }}</span>
             </li>
             <li class="nav-item">
-              <span id="summary-tab-regular" class="summary-tab nav-link">{{ _("Regular")|force_escape }}</span>
+              <span id="summary-tab-regular" class="summary-tab nav-link" data-tab="regular">{{ _("Regular")|force_escape }}</span>
             </li>
             <li class="nav-item">
-              <span id="summary-tab-count" class="summary-tab nav-link">{{ _("Count")|force_escape }}</span>
+              <span id="summary-tab-count" class="summary-tab nav-link" data-tab="count">{{ _("Count")|force_escape }}</span>
             </li>
           </ul>
 
diff --git a/accounting/templates/accounting/transactions/expense/form.html b/accounting/templates/accounting/transactions/expense/form.html
index 0ff54f5..77d8a97 100644
--- a/accounting/templates/accounting/transactions/expense/form.html
+++ b/accounting/templates/accounting/transactions/expense/form.html
@@ -71,7 +71,7 @@ First written: 2020/7/23
       </ul>
       <ul class="list-group">
         <li class="list-group-item">
-          <button id="debit-new" class="btn btn-primary btn-new" type="button">
+          <button class="btn btn-primary btn-new" type="button" data-type="debit">
             <i class="fas fa-plus"></i>
           </button>
         </li>
diff --git a/accounting/templates/accounting/transactions/income/form.html b/accounting/templates/accounting/transactions/income/form.html
index 59a0ec0..27458f8 100644
--- a/accounting/templates/accounting/transactions/income/form.html
+++ b/accounting/templates/accounting/transactions/income/form.html
@@ -71,7 +71,7 @@ First written: 2020/7/23
       </ul>
       <ul class="list-group">
         <li class="list-group-item">
-          <button id="credit-new" class="btn btn-primary btn-new" type="button">
+          <button class="btn btn-primary btn-new" type="button" data-type="credit">
             <i class="fas fa-plus"></i>
           </button>
         </li>
diff --git a/accounting/templates/accounting/transactions/transfer/form.html b/accounting/templates/accounting/transactions/transfer/form.html
index a208c42..525e14a 100644
--- a/accounting/templates/accounting/transactions/transfer/form.html
+++ b/accounting/templates/accounting/transactions/transfer/form.html
@@ -73,7 +73,7 @@ First written: 2020/7/23
       </ul>
       <ul class="list-group">
         <li class="list-group-item">
-          <button id="debit-new" class="btn btn-primary btn-new" type="button">
+          <button class="btn btn-primary btn-new" type="button" data-type="debit">
             <i class="fas fa-plus"></i>
           </button>
         </li>
@@ -93,13 +93,13 @@ First written: 2020/7/23
       <ul id="credit-records" class="list-group">
         {% for record in item.credit_records %}
           {% with record_type="credit" no=forloop.counter order=forloop.counter %}
-            {% include "accounting/transactions/../../include/form-record-transfer.html" %}
+            {% include "accounting/include/form-record-transfer.html" %}
           {% endwith %}
         {% endfor %}
       </ul>
       <ul class="list-group">
         <li class="list-group-item">
-          <button id="credit-new" class="btn btn-primary btn-new" type="button">
+          <button class="btn btn-primary btn-new" type="button" data-type="credit">
             <i class="fas fa-plus"></i>
           </button>
         </li>
diff --git a/mia_core/static/mia_core/js/period-chooser.js b/mia_core/static/mia_core/js/period-chooser.js
index ddbe566..d37d165 100644
--- a/mia_core/static/mia_core/js/period-chooser.js
+++ b/mia_core/static/mia_core/js/period-chooser.js
@@ -25,7 +25,7 @@
 $(function () {
     $(".period-tab")
         .on("click", function () {
-            switchPeriodTab(this);
+            switchPeriodTab($(this));
         });
     $("#button-period-day")
         .on("click", function () {
@@ -86,24 +86,13 @@ function monthPickerChanged(newDate) {
 /**
  * Switch the period chooser to tab.
  *
- * @param {HTMLElement} tab the navigation tab corresponding to a type
- *                          of period
+ * @param {jQuery} tab the navigation tab corresponding to a type
+ *                     of period
  * @private
  */
 function switchPeriodTab(tab) {
-    const tabName = tab.id.substr("period-tab-".length);
-    $(".period-content").each(function () {
-        if (this.id === "period-content-" + tabName) {
-            this.classList.remove("d-none");
-        } else {
-            this.classList.add("d-none");
-        }
-    });
-    $(".period-tab").each(function () {
-        if (this.id === tab.id) {
-            this.classList.add("active");
-        } else {
-            this.classList.remove("active");
-        }
-    });
+    $(".period-content").addClass("d-none");
+    $("#period-content-" + tab.data("tab")).removeClass("d-none");
+    $(".period-tab").removeClass("active");
+    tab.addClass("active");
 }
diff --git a/mia_core/templates/mia_core/include/period-chooser.html b/mia_core/templates/mia_core/include/period-chooser.html
index 9b90368..ec4b2ce 100644
--- a/mia_core/templates/mia_core/include/period-chooser.html
+++ b/mia_core/templates/mia_core/include/period-chooser.html
@@ -42,16 +42,16 @@ First written: 2020/7/10
       <!-- Modal body -->
       <ul class="nav nav-tabs">
         <li class="nav-item">
-          <span id="period-tab-month" class="period-tab nav-link active">{{ _("Month")|force_escape }}</span>
+          <span class="period-tab nav-link active" data-tab="month">{{ _("Month")|force_escape }}</span>
         </li>
         <li class="nav-item">
-          <span id="period-tab-year" class="period-tab nav-link">{{ _("Year")|force_escape }}</span>
+          <span class="period-tab nav-link" data-tab="year">{{ _("Year")|force_escape }}</span>
         </li>
         <li class="nav-item">
-          <span id="period-tab-day" class="period-tab nav-link">{{ _("Day")|force_escape }}</span>
+          <span class="period-tab nav-link" data-tab="day">{{ _("Day")|force_escape }}</span>
         </li>
         <li class="nav-item">
-          <span id="period-tab-custom" class="period-tab nav-link">{{ _("Custom")|force_escape }}</span>
+          <span class="period-tab nav-link" data-tab="custom">{{ _("Custom")|force_escape }}</span>
         </li>
       </ul>
       <div id="period-content-month" class="period-content modal-body">