XPath getting link and Name text in one go via javascript

Hey all I currently have the following code gathering the users url link and also their name:

function getLinkAndNames() {
    var nodes    = "";
    var nodes2   = "";
    var p        = "";
    let i        = 1;
    let attr     = "";
    let attr2    = "";
    const result = {
        Data: []
    };

    for (var x = 0; x <= 16; x++) {
       if (attr != null) {
           p = "//div[" + i + "]/div/div/div[1]/descendant::a[contains(@href, '?fr')]/@href";
           p2 = "//div[" + i + "]/div/div/div[1]/a/div/span/span/descendant::strong[contains(text(),' ')]";
           nodes = document.evaluate(p, document, null, XPathResult.ANY_TYPE, null);
           nodes2 = document.evaluate(p2, document, null, XPathResult.ANY_TYPE, null);

           if (attr2 != null) {
               result.Data.push({
                   href: attr.value,
                   name: attr2.innerText
               });

               i++;
               attr2 = nodes2.iterateNext();
               attr = nodes.iterateNext();
            }
            } else {
               result.Data.push({
                   href: 'none',
                   name: 'none'
               });

               break;
            }
    }

    return JSON.stringify(result,null,2);
}

console.log(getLinkAndNames());

Code (JavaScript):

The code above does gather the needed information but seems to always skip the first user and skips around.

The html structure looks like this:

The red outline is the user link while the blue outline is their name.

The xpath for the red outline is:

The xpath for the blue outline is:

Where X is replaced by the current loop number.

And the JSON the code creates looks like this:

{
  "Data": [
    {},
    {
      "href": "/user2?fr",
      "name": "user1"
    },
    {
      "href": "/user2?fr",
      "name": "user2"
    },
    {
      "href": "/user3?fr",
      "name": "user3"
    },
    {
      "href": "/user2?fr",
      "name": "user4"
    },
    {
      "href": "/user5?fr",
      "name": "user5"
    },
    .....etc etc

Code (markup):

The issue being:

Skips the first altogether. (incorrect)
First users name with 2nd users link (incorrect)
Second user name with 2nd user link (correct)
Third user name with 3rd users link (correct)
Forth user name with 3nd user link (incorrect)
Fifth user name with 5th user link (correct)

Code (markup):

What it should look like:

First users name with 1st users link
Second user name with 2nd user link
Third user name with 3rd users link
Forth user name with 4th user link
Fifth user name with 5th user link
etc....

Code (markup):

So what am I missing here?

Here is the JSFiddle https://jsfiddle.net/stealthrt/u6sr7p9d/ of the above.

 

Given the train wreck of incompetence the markup you're trying to work with seems to be, tossing the pointlessly convoluted and hard to work with xpath rubbish at it is hardly the right answer.

I'm not sure what it is you're actually trying to accomplish, but the first step would be to take that HTML and put a bullet in its brain. Endless pointless DIV for nothing, endless pointless classes for nothing, endless pointless data- likely for nothing of value, not one lick of proper semantic markup, static style in the markup, anchors wrapping DIV...

And that's assuming you've deleted the contents of all those attributes to try and hide who the client is and/or confidential info. There is NOTHING I would preserve from that, much less make an even bigger mess out of it by crapping scripttardery atop it.

Though in all likelihood assuming there's a meaningful class on each of the parent DIV, what one should likely be doing is getElementsByClassName and then DOM walking its contents, not screwing around with xpath. But I can't show you how to do that if you don't provide the classes and content that would let one do that.