thanks for reading my post!

I've been trying to create a function that will take the objects in an array of employee data and display them in a table.

Within the class called 'system', I have system.giveAllEmployees(), which returns the array of all the employees, while system.giveAllOffers() returns all the active offers that have been put in the system. It should all be organized in the table employeeData, and run through and see how many offers each employee is assigned to, and add that to the table as well. It works and loads to the table but instead of updating the offer for each employee, whenever a new offer is loaded to the system it updates the offer number for all the employees in the table.

I assume this is because of how i set up the loop? but i'm really stumped as to why this is happening. I can provide any other information or code needed, if anyone knows a better way to load data from arrays into a table id appreciate that as well!

function loadAll() {
  var a      = system.giveAllEmployees();
  var b      = system.giveAllOffers();
  var tr     = "";
  var table  = document.getElementById("employeeData");
  let offers = 0;
  
  table.innerHTML = "";

  a.forEach( x => {   
    b.forEach( y => {
      if (x.employeeName === y.name) {
        offers += 1;
      }
      return offers;
    }),
    tr += '<tr>';
    tr += '<td>' + x.name + '</td>' 
        + '<td>' + x.document + '</td>' 
        + '<td>' + x.departament + '</td>'
        + '<td>' + x.age + '</td>' 
        + '<td>' + offers + '</td>';
    tr += '</tr>';
    offers = 0;
  })
  table.innerHTML += tr;
}

And for context, here's a picture of the table the data is loaded into:

Thanks again for any tips or help on this issue!