Why is my array of objects not being displayed from JavaScript to HTML properly?

const initial = [
  { name: "Alice", price: 30, occupation: "Writer" },
  { name: "Bob", price: 50, occupation: "Teacher"}
]
    
   


const extraFreelancers = [
    { name: "Dr. Slice", price: 25, occupation: "Gardener" },
    { name: "Dr. Pressure", price: 51, occupation: "Programmer" },
    { name: "Prof. Possibility", price: 43, occupation: "Teacher" },
    { name: "Prof. Prism", price: 81, occupation: "Teacher" },
    { name: "Dr. Impulse", price: 43, occupation: "Teacher" },
    { name: "Prof. Spark", price: 76, occupation: "Programmer" },
    { name: "Dr. Wire", price: 47, occupation: "Teacher" },
    { name: "Prof. Goose", price: 72, occupation: "Driver" },
  ]; 

const maxLancers = 5;

render();


const addFreelancerInterval = setInterval(addFreelancer, 5000);

function render() {
    const container = document.querySelector(".container")

    for(let i = 0; i < initial.length; i++){
    const usersBox = document.createElement("div")
    usersBox.className = "usersBox"
    
    const name = document.createElement("p")
    const price = document.createElement("p")
    const occ = document.createElement("p")
    
    name.innerText = `${initial[i].name}`
    price.innerText = `$${initial[i].price}`
    occ.innerText = `${initial[i].occupation}`
    
    usersBox.appendChild(name)
    usersBox.appendChild(price)
    usersBox.appendChild(occ)
    
    container.appendChild(usersBox)
  }
}


function addFreelancer() {
    const freelancer = extraFreelancers[Math.floor(Math.random() * extraFreelancers.length)];
    initial.push(freelancer);
    render();
    

    if (initial.length >= maxLancers) {
      clearInterval(addFreelancerInterval);
    }
    averageStartingPrice();
}

const avg = document.createElement("p")
avg.className = "avg"
avg.innerText = `${averageStartingPrice()}`;


function averageStartingPrice() {
  const totalStartingPrice = initial.reduce((acc, freelancer) => acc += freelancer.price, 0);
  return totalStartingPrice / initial.length;
}

html {
    background-color: white;
}

body {
    background-color: white;
    height: 100vh;
    width: 100%;
    margin: 0;
}

.usersBox{
    display: flex;
    border-bottom: 2px solid black;
    text-align: center;
    font-size: 30px;
    padding: 10px;
    height: 100px;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    width: 1000px;
  }

#box {
    margin: auto;
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
    border: 5px solid black;
    margin:100px;
    padding: 0px;
}

p {
    text-align: center;
    margin: auto;
}

#title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    padding: 10px;
    height: 200px;
    width: 1000px;
    flex-direction: column;
}

h1 {
    margin: 10px;

}

h2 {
    margin: 10px;
    margin-bottom: 20px;
}

#lists{
    justify-content: space-between;
    display: flex;
}

h3 {
    margin: 110px;
    margin-top: 0px;
    margin-bottom: 0px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Freelancer Forum</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="box">
        <div id="title">
            <h1>Freelancer Forum</h1>
            <p class="avg">The average starting price is 
            </p>
            <h2>Available Freelancers: </h2> 
            <div id="lists">
                <h3>Name</h3>
                <h3>Price</h3>
                <h3>Occupation</h3>
            </div>
        </div>
        <div class="container">  
        </div>
    </div>


        <script src="script.js"></script>
</body>
</html>

I have created two functions to display an array of objects onto an HTML page.

function render() {
    const container = document.querySelector(".container")

    for(let i = 0; i < initial.length; i++){
    const usersBox = document.createElement("div")
    usersBox.className = "usersBox"
    
    const name = document.createElement("p")
    const price = document.createElement("p")
    const occ = document.createElement("p")
    
    name.innerText = `${initial[i].name}`
    price.innerText = `$${initial[i].price}`
    occ.innerText = `${initial[i].occupation}`
    
    usersBox.appendChild(name)
    usersBox.appendChild(price)
    usersBox.appendChild(occ)
    
    container.appendChild(usersBox)
  }
}

The above function to display the array onto HTML.

function addFreelancer() {
    const freelancer = extraFreelancers[Math.floor(Math.random() * extraFreelancers.length)];
    initial.push(freelancer);
    render();
    

    if (initial.length >= maxLancers) {
      clearInterval(addFreelancerInterval);
    }
    averageStartingPrice();
}

And this function to add objects from another array to the initial array.

For some reason, the output on the HTML page is iterating the same initial array over and over again instead of just adding the new objects to the list. Below is a screenshot of what the output looks like (note the repeated "Alice" and "Bob" objects, which are the initial array).

HTML DISPLAY

I really have no idea where the issue is. I am very new to JavaScript and HTML so I apologize if it is something simple that was overlooked. Any help is greatly appreciated!

(https://github.com/antjuh/Unit2.FreelancerForum.git) GitHub for anyone interested in further details.

EDIT: Apologies, I have added JavaScript, HTML, and CSS to the post for easy access.

Solution

The problem is that you are repeating the same initial list, which has the same people. Thus it will repeat the same person again.

So what I did is add a variable that whenever the render runs it sets it to the length of the initial list, so when the something is added to the list it doesn't repeat the same people again.

const initial = [
  { name: "Alice", price: 30, occupation: "Writer" },
  { name: "Bob", price: 50, occupation: "Teacher"}
]
    
   


const extraFreelancers = [
    { name: "Dr. Slice", price: 25, occupation: "Gardener" },
    { name: "Dr. Pressure", price: 51, occupation: "Programmer" },
    { name: "Prof. Possibility", price: 43, occupation: "Teacher" },
    { name: "Prof. Prism", price: 81, occupation: "Teacher" },
    { name: "Dr. Impulse", price: 43, occupation: "Teacher" },
    { name: "Prof. Spark", price: 76, occupation: "Programmer" },
    { name: "Dr. Wire", price: 47, occupation: "Teacher" },
    { name: "Prof. Goose", price: 72, occupation: "Driver" },
  ]; 

const maxLancers = 5;

let initialListThingy = 0 // I don't know what to name this

render();


const addFreelancerInterval = setInterval(addFreelancer, 5000);



function render() {
    
    const container = document.querySelector(".container")
    

    for(i = initialListThingy; i < initial.length; i++){
    const usersBox = document.createElement("div")
    usersBox.className = "usersBox"
    
    const name = document.createElement("p")
    const price = document.createElement("p")
    const occ = document.createElement("p")
    
    name.innerText = `${initial[i].name}`
    price.innerText = `$${initial[i].price}`
    occ.innerText = `${initial[i].occupation}`
    
    usersBox.appendChild(name)
    usersBox.appendChild(price)
    usersBox.appendChild(occ)
    
    container.appendChild(usersBox)
  }
  initialListThingy = initial.length
}


function addFreelancer() {
    const freelancer = extraFreelancers[Math.floor(Math.random() * extraFreelancers.length)];
    initial.push(freelancer);
    render();
    

    if (initial.length >= maxLancers) {
      clearInterval(addFreelancerInterval);
    }
    averageStartingPrice();
}

const avg = document.createElement("p")
avg.className = "avg"
avg.innerText = `${averageStartingPrice()}`;


function averageStartingPrice() {
  const totalStartingPrice = initial.reduce((acc, freelancer) => acc += freelancer.price, 0);
  return totalStartingPrice / initial.length;
}

html {
    background-color: white;
}

body {
    background-color: white;
    height: 100vh;
    width: 100%;
    margin: 0;
}

.usersBox{
    display: flex;
    border-bottom: 2px solid black;
    text-align: center;
    font-size: 30px;
    padding: 10px;
    height: 100px;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    width: 1000px;
  }

#box {
    margin: auto;
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
    border: 5px solid black;
    margin:100px;
    padding: 0px;
}

p {
    text-align: center;
    margin: auto;
}

#title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    padding: 10px;
    height: 200px;
    width: 1000px;
    flex-direction: column;
}

h1 {
    margin: 10px;

}

h2 {
    margin: 10px;
    margin-bottom: 20px;
}

#lists{
    justify-content: space-between;
    display: flex;
}

h3 {
    margin: 110px;
    margin-top: 0px;
    margin-bottom: 0px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Freelancer Forum</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="box">
        <div id="title">
            <h1>Freelancer Forum</h1>
            <p class="avg">The average starting price is 
            </p>
            <h2>Available Freelancers: </h2> 
            <div id="lists">
                <h3>Name</h3>
                <h3>Price</h3>
                <h3>Occupation</h3>
            </div>
        </div>
        <div class="container">  
        </div>
    </div>


        <script src="script.js"></script>
</body>
</html>