I would like to change the information I display on the page based on the url by adding '?id=(x)' at the end. I have an Api with products that have an ID, name and gender.

[{0:{id:1, name:'item1', gender:'toy'}}, {1:{id:2, name:'item2', gender:'it'}}]

    <div class="items">
      <h1 id="name"></h1>
      <h2 id="gender"></h2>
    </div>

I would like that at the end of the url adding ?id=1 for example it would show me the name and the gender on screen and if I change in the link the 1 for the 2 I would get the information of the other item. If it is also possible to do it with pure Javascript that could also be an option.

Thanks in advance.