jquery – JavaScript API not correctly display corresponding JSON Data

I’m trying to display the JSON data with an if/else based on a dropdown selection to show the corresponding data with each name chosen.

JSON DATA: jsonplaceholder.typicode.com/users

Example of what I am trying to achieve

// this is the dropdown list
// input Ids Username, Email, Cont_No, Street, Suite, City, Zipcode, Latitude, Longitude

document.addEventListener(‘DOMContentLoaded’, () => {
const selectName = document.getElementById(‘dropuser’);

fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then(data => {
        data.forEach(data => {
            selectName.options[selectName.options.length] = new Option(data.name, data.name);
            displayUserInfo(data);
            console.log(data);
        })
    })
    .catch(err => console.log(err));


 function displayUserInfo(data){
    var disUser = selectName.options[selectName.options.length] ;

    if(disUser == data.name){
        document.getElementById('Username').value = data.name;
    }else{

    }
    
     document.getElementById('Email').value = data.email;
     document.getElementById('Cont_No').value = data.phone;
     document.getElementById('Street').value = data.address.street;
     document.getElementById('Suite').value  = data.address.suite;
     document.getElementById('City').value  = data.address.city;
     document.getElementById('Zipcode').value = data.address.zipcode;
     document.getElementById('Latitude').value = data.address.geo.lat;
     document.getElementById('Longitude').value = data.address.geo.lat;
}

});