public/assets/js/functions.js

@@ -99,15 +99,16 @@ function sortBy(column) {
     )
 
     // switch direction on every call
+    let currentSortOrder = document.getElementById(column + '_sort')
     let currentTitleElement = document.getElementById(column)
     let currentTitle = currentTitleElement.innerHTML
 
     let newTitle
-    if (currentSortOrder === 'asc') {
-        currentSortOrder = 'desc'
+    if (currentSortOrder.innerHTML === 'asc') {
+        currentSortOrder.innerHTML = 'desc'
         newTitle = currentTitle[0] + currentTitle.substring(1) + ' ⬇'
     } else {
-        currentSortOrder = 'asc'
+        currentSortOrder.innerHTML = 'asc'
         newTitle = currentTitle[0] + currentTitle.substring(1) + ' ⬆'
     }
     currentTitleElement.innerHTML = newTitle
@@ -130,8 +131,9 @@ function sortBy(column) {
             let rowYNumber = rowYId.match(/\d+/)
             let valueY = document.getElementById(column + '_' + rowYNumber).value
 
+            let currentSortOrder = document.getElementById(column + '_sort')
             let sortOrder
-            if (currentSortOrder === 'asc') {
+            if (currentSortOrder.innerHTML === 'asc') {
                 sortOrder = 1
             } else {
                 sortOrder = -1
@@ -181,9 +183,6 @@ function closeError() {
 
 }
 
-// global scope
-let currentSortOrder = 'desc'
-
 document.addEventListener('DOMContentLoaded', () => {
     const table = document.getElementById('address_table') || false
     if (table) {

templates/index.html.php

@@ -33,6 +33,14 @@
             </td>
     </tr>
     <?php endforeach; ?>
+    <tr style="display:none;">
+        <td id="first_sort">desc</td>
+        <td id="last_sort">desc</td>
+        <td id="street_sort">desc</td>
+        <td id="zip_sort">desc</td>
+        <td id="city_sort">desc</td>
+        <td id="phone_sort">desc</td>
+    </tr>
 </table>
 </form>