Verifying URLs correctly inside Cypress `each`

Just for a background I don't have much experience of working with JavaScript or Cypress, so there might be better way of doing things.

I have a list of clickable buttons that sends request to the same path but with different query parameters. I want to verify that the query parameters are correctly set in the request URL for each element in the list. I have written a Cypress test that looks something like this.

cy.route(/^(.*)\/details\//i, '@getDetails');

cy.get('#id li')
  .each($el => {
    cy.wrap($el).click();
    cy.wait('@getDetails')
      .its('url')
      .should('match', new RegExp(`type=${$el.text()}($|&)`));
  });

Earlier I had written a test where I clicked each list element manually (not inside each) and then verified the query parameters for that element - that worked. But in the above code even though the requests are made correctly, the URL that is being matched inside should, is always corresponding to the first element of the list which makes the test to fail (when the URL is verified for second element).

I have a few questions regarding this.

• It makes sense that the test without each passes but why the test with each fails - even it should pass ? What is the difference between the two ways of writing the test ?
• Is there a way to make the above code work ?
• And lastly are there other better ways of doing the same ?