[URGENT] Simple HTML table sorting with JavaScript on a WP website

I'm a software engineer in AI, but this project I promised is taking me too much time to solve this in WP. So by now, I'd rather do other projects :-)

Type of sorting: Ascending and Descending by table columns.

Data: alphabetic and numeric values.

See attached explanation.

Both vanilla JS or jQuery solutions are viable.

Deadline: 11:30 UTC today (Friday 1/14/2022).

Website app is here (It's prototype): [login to view URL]

Only the table sorting needs solution, everything else works.

Tables are accessed by clicking on a map.

I can explain everything in depth, I know the involved plugins and libraries.

I can give you Wordpress admin acess.

~~ The issue I have: ~~

The HTML tables are inside of a Lightbox /JS library/, so my JS cannot attach EventListeners correctly, because this Ligthbox creates visible clones of the HTML tables, after it's triggered.

Good thing is that: Every cell which should order the values in it's column has a specific class (.sort-table), you can use for attaching .Click. Also all the tables have same number of columns.

Goal:

1. Initial table ordering by first column in ABC order when tables are rendered in Lightbox.

2. User can click on any cell heading which sorts the corresponding column.

First click by ASC order. Second click by DSC (descending) order. Up and down arrows will appear, see attached explanation.

3. Tables have different heading and footer row. Could be solved by .append, but prefered is a quicker solution.

Possible project upgrade: Consultations / recommendations for faster website loading and improvements.

Purpose of the project: Delivering an election map with interactive tables in WP environment.

WordPress JavaScript HTML

Nº del proyecto: #32632163

Sobre el proyecto