JSFiddle - React, Tailwind, and code Playground

HTML

<label>Select staffmember</label><select id="staffmember">
  <option value="1">Anna</option>
  <option value="2">Billy</option>
  <option value="3">Cody</option>
</select>

<div id="confirmchoice" class="btn">
  Click here to confirm choice
</div>
<label>Profile of: </label><input id="nr1" /><br />



<h3 id="h3tl">
</h3>

CSS

.btn{
  width: 400px;
  height: 30px;
  border: 1px solid blue;
  padding-top: 5px;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-left: 4px;
  padding-right: 4px;
  cursor: pointer;
}

JavaScript

var staffmembername;

var data = {
  "personaldata": [{
      "name": staffmembername,
      "location": "Iowa"
    },
    {
      "name": "Cynthia",
      "location": "California",
    }
  ]

};

document.getElementById("confirmchoice").onclick = function() {
  var e = document.getElementById("staffmember");
  pickedname = e.options[e.selectedIndex].text;
  document.getElementById("nr1").value = pickedname;
  staffmembername = document.getElementById("nr1").value;
 alert(staffmembername);
  document.getElementById("h3tl").innerHTML = "name:" + data.personaldata[0].name + "<br>" + "location: " + data.personaldata[0].location;


}