How might I change the value of a property in an object created by a function? Is this possible in Javascript?

I want to change a value of a property, in this case, lets say the age of a ‘resident’ (a resident has been created by the function “createResident()” following the move-In command) that occurs at the start of a game. If time were to advance, like with the push of a button “advance year”, how can I change the property “Age” to increment by 1. Is it possible for me to create some sort of copy or track the Resident and its properties and have it dynamically change with any given output from a function. I basically want each Resident and its properties to be displayed in HTML, so the age value would be viewed on the browser. I am completely open to revising this entire thing!

Here is my code:

const testTime = document.createElement("testTime");
testTime.classList.add('testTime');
document.body.appendChild(testTime);
testTime.setAttribute("id", "testTime");
var cEBtn = document.createElement("button");
document.body.appendChild(cEBtn);
cEBtn.innerHTML = "Change Year";
cEBtn.setAttribute("id", "cEBtn");
testTime.innerHTML = "Year: 0";
let year = 0;

function changeYear() {
    year++;
    testTime.innerHTML = "Year:" + " " + year;
    return [year];
};

// Move-In resident

let firstName = ["Carol", "Joe", "Bob", "Matthew", "James", 'Bachelor', 'Rogue', "Bobby"]
let lastName = ["Doe", "Smith", "Thomas", "Johnson", "Broad", "Tyler"]
let gender = ["Male", "Female", "Non-binary"]

randomchoice = object => object[Math.floor(Math.random() * object.length)]

const residents = document.getElementById("Residents");

function createResident() {
    let age = Math.floor(Math.random() * (60 - 18) + 18);
    let first_name = randomchoice(firstName);
    let last_name = randomchoice(lastName);
    var Resident = document.createElement("td");
    Resident.style.backgroundColor = "white";

    Resident.id = "Resident" + " " + residentAmount;
   
    const ResidentObj = {
    First_name: first_name,
    Last_name: last_name,
    ID: residentAmount,
    Status: "Alive" || "Dead",
    Age: age,
    Gender: randomchoice(gender),
    get fullName() {
        return ResidentObj.First_name + " " + ResidentObj.Last_name
    }

    }
    
    residents.append(Resident)
        
        Resident.innerHTML = "Name:" + " " + ResidentObj.fullName + "<br>" + "ID:" + " " + ResidentObj.ID + "<br>" + "Age:" + " " + ResidentObj.Age + "<br>" + "Gender:" + " " + ResidentObj.Gender
        + "<br>" + "Status:" + " " + ResidentObj.Status;
}

function moveInRes() {
    residentAmount += 1;
    createResident()

}


moveInRes()
moveInRes()
moveInRes()
moveInRes()

cEBtn.onclick = function called() { 
    changeYear();
}

I have tried removing the “ResidentObj” from the createResident function. However, that causes HTML to not be able to reference individual names, ages, and other attributes. I want these residents to all have different values of attributes at spawn. I know there has to be a roundabout way of doing this. If not, what other languages do you recommend to do more of this procedural framework?

Thanks!