By the time getSelectedData is actually called, the value in UserData is the last value assigned to it.

If instead you had used

... onclick="getSelectedData(` + UserData + `)"...

each onclick would have the value of UserData at the time you were adding to x.

UPDATE: As pointed out, UserData is an object. Since user isn't defined in this code, it would presumably be available to getSelectedData, and thus one could use:

... onclick="getSelectedData(user[` + i + `])"...

You are inserting a new user, similar to this innerHTML. This is an inappropriate way because it overrides all content. You may use this "appendChild" like this "card.appendChild"

Your onclick attribute will fire but the argument UserData will not hold any value unless you put it there. One solution, demonstrated in my working snippet below, is to send the div itself to the function using the this reference. In your function, you then extract the values you need by retrieving the div's child elements collection and reading the values back that you previously put there.

const user = [
  {userName: "John", userCountry: "France", userProfession: "musician", userImage: "001.png"},
  {userName: "Jane", userCountry: "Germany", userProfession: "Teacher", userImage: "005.png"},
  {userName: "Peter", userCountry: "Italy", userProfession: "Mechanic", userImage: "021.png"}
  ];

function processUser(element) {
  let user = element.children[1].innerHTML;
  console.log(`user is ${user}`);
  let country = element.children[2].innerHTML;
  let occupation = element.children[3].innerHTML;
  let image = element.children[0].src;
  console.log(`${user} lives in ${country}, their occupation is ${occupation}`);
  console.log(`${user}'s picture: ${image}`)
}

for(let i=0; i < user.length; i++){
  let markup = "";
  const div = document.createElement('div');
  div.setAttribute("class", "card");
  div.setAttribute("onclick", "processUser(this)");
  markup += `<img src="${user[i].userImage}" alt="" class="UserImage my-3"></img>`;
  markup += `<p class="userName">${user[i].userName}</p>`;
  markup += `<p class="userCountry">${user[i].userCountry}</p>`;
  markup += `<p class="userProfession">${user[i].userProfession}</p>`;
  div.innerHTML = markup;
  
document.body.appendChild(div);
}

body {
 background: yellow;
}
div {
 border: 1px solid red;
 padding: 10px;
 margin: 10px;
 background: white;
}
img {
  width:40px;
  height: 50px;
  background: red;
  border: 1px solid black;
}

<p>click any of the divs:</p>

That works, and achieves what I think you want to. I'd maybe have chosen a different approach if you can add numerical IDs to your user objects in your data array to the same value as the index for that user object, you could set the ID of the div to the same (number) and just send that back to your function using (this.id) as the argument to the onlick event. That ID can then be used to read your data array for the relevant user user[retrievedID].name etc.