JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="retrieveResults()">
Click me!
</button>
<h1 id="firstResult">
First name:
</h1>
<p>
Subsequent names:
</p>
<p id="subsequentNames">

</p>

JavaScript

async function retrieveResults(){
	const res = await fetch("https://randomuser.me/api");
  const firstData = await res.json();
  document.getElementById("firstResult").innerHTML = "First name: " + firstData.results[0].name.first;
  // calling fetch in loop;
  names = ""
  for(var i=0;i<5;i++){
    var tempRes = await fetch("https://randomuser.me/api");
    var tempData = await tempRes.json();
    console.log(tempData.results[0].name.first)
    names += tempData.results[0].name.first + ", ";
  }
  document.getElementById("subsequentNames").innerHTML = names;
  
 }