Nomad Web UI services page, rows for tags and address/port does not correspond

### Nomad version
Nomad v1.7.2
BuildDate 2023-12-13T19:59:42Z
Revision 64e3dca9274b493e38a49fda3a70fd31d0485b91

### Operating system and Environment details
* Operating System: Ubuntu 23.04
* Kernel: Linux 6.2.0-39-generic
* Architecture: x86-64

### Issue
On the services endpoint on the web UI, you see the following:

```
Service Name Level Tag Allocations
-------------- ------- ----- -------------
app group foo 3
app group bar 3
app group baz 3
```

When you click on any of those services, you see the same data:
```
Allocation Client IP Address & Port
------------- -------------- -------------------
alloc_id-01 client_id-01 127.0.0.1:1111
alloc_id-01 client_id-01 127.0.0.1:2222
alloc_id-01 client_id-01 127.0.0.1:3333
```

However, tags `(foo, bar, baz)` does not correspond to ports `(1111, 2222, 3333)` i.e. (row 1) tag `foo` on the first page may correspond to (row 3) `3333` on the second page.

Together with #20264, when dynamic ports are used, it takes a bit of trial and error or luck to find a particular service.tag endpoint.

### Reproduction steps
Refer to #17109

#### Expected Result
To correctly correlate tags with ports, rows of first page should correspond to rows of second page

#### Actual Result
They do not correspond