How to make changes to something automatically and have it show in real time. js

// TODO: Rating system
let code;
let jobEntered;
let item;
let user;
let qAdd;
let amount;
let job;
let message = "";
let name;
let employee;
let conf;
var i;
const print = (message) => {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}
const getReport = (employee) => {

  let report = `<h1 class="name" id="name"> ${employee.name} </h1>`;
  `<ol>`
  report += `<li class="cups"> Cups Sold: ${employee.cupsSold} </li>`;
  report += `<li class="baked"> Baked Goods Sold: ${employee.bakedGoodsSold} </li>`;
  report += `<li class="rating"> Rating: ${employee.rating} </li>`;
  report += `<li class="serveys">Serveys Sold: ${employee.surveys} </li>`;
  report += `<li class="notCollected">Amount Not collected: ${employee.amountEarned}</li>`;
  report += `<li class="mistakes">Mistakes: ${employee.mistakesMade}</li>`;
  `</ol>`
  return report;
};

const data = document.getElementById('data');
const julie = document.getElementById('julieReport');
const luke = document.getElementById('lukeReport');
const brendon = document.getElementById('brendonReport');
const company = document.getElementById('company');
const jobCode = document.getElementById('jobCode');
const jobsCompleted = document.getElementById('jobsCompleted')
const toggle = document.querySelector('.earn');
const text = document.getElementById('text');
const addNotes = document.getElementById('addNotes');
const removeNotes = document.getElementById('removeNotes');
const noteList = document.getElementById('noteTitle');
const parent = document.getElementById('parent');

 noteList.addEventListener('mouseover', () => {
  noteList.textContent = noteList.textContent.toUpperCase();
});

noteList.addEventListener('mouseout', () => {
  noteList.textContent = noteList.textContent.toLowerCase();
});

parent.addEventListener('mouseover', () => {
  if (event.target.tagName === 'LI')
  event.target.textContent = event.target.textContent.toUpperCase();
    event.target.style.color = 'yellow';
});

parent.addEventListener('mouseout', () => {
  if (event.target.tagName === 'LI')
  event.target.textContent = event.target.textContent.toLowerCase();
event.target.style.color = '';
});

company.addEventListener('click', () => {
let calc = prompt("Type addition");
});

//Calculator
const Calculator = function () {

}
//This adds the notes
addNotes.addEventListener('click', () => {
let ul = document.getElementById('parent');
let li = document.createElement("li");
li.className = 'notesTaken';
li.textContent = text.value;
ul.appendChild(li);
text.value = '';
});
//This function removes the notes
removeNotes.addEventListener('click', () => {
let ul = document.getElementById('parent');
let li = document.querySelector('li:last-child');
ul.removeChild(li);
});
//Employees report function
julie.addEventListener('click', () => {
  var i = 0;
  message = getReport(employees[0]);
  print(message);
});
luke.addEventListener('click', () => {
  var i = 1;
  message = getReport(employees[1]);
  print(message);
});
brendon.addEventListener('click', () => {
  var i = 2;
  message = getReport(employees[2]);
  print(message);
});

//questions and answers
jobCode.addEventListener("click", () => {
      item = prompt("What's the item?");
      if (item === "small lemonade") {
        alert("That costs $1.50");
      } else if (item === "large lemonade") {
        alert("This costs $2");
      } else if (item === "small cookie") {
        alert("75cents per cookie");
      } else if (item === "large cookie") {
        alert("$1.50 per large cookie");
      } else if (item === "small pink lemonade") {
        alert("$1.50");
      } else if (item === "large pink lemonade") {
        alert("$2 per cup");
      } else if (item === "special lemonade") {
        alert("$3 per cup");
      } else if (item === "ice") {
        alert("Free, give them 1 scoop");
      } else if (item === "straws") {
        alert("Only ask woman if they want one. Let them grab it if possible");
      } else if (item === "survey") {
        alert("Ask everyone if they would like to take it...after they do then put it in the folder");
      } else if (item === "setup") {
        alert("Once you reach the stop sign first, setup the table. Then, the lemonade jugs. Then, get sign out. Then, cooler for chair. Leave everything else secured in wagon");
      } else if (item === "cleanup") {
        alert("First, put up cooler. Second, jugs and other small items. Lastly table");
      } else if (item === "spill") {
        alert("If you spill a cup or drop something on ground make sure to throw it out and give them a new one. Make sure to log what you did");
      } else if (item === "sold out") {
        alert("If you sell out just follow the cleanup procedures and clock out");
      } else if (item === "my item") {
        alert("You get %75 of profit if you are there selling");
      } else if (item === "brendons") {
        alert("If you are selling you get %40 profit");
      } else if (item === "greeting") {
        alert("Say hi, what would you like? Then name everything we have.");
      } else if (item === "sale") {
        alert("Thank-you for coming! Hope you enjoy");
      } else if (item === "card") {
        alert("Give customer our card and ask them to email me if they want to know when we will be open");
      } else {
        alert("Try something else or retype");
      }
    });

      //The rating system
if (cupsSold > 10) {
  rating += 1;
}