how to create a new paragraphs in html from js?

I have a problem when user inputting the number in input and my js code is showing the paragraph and two buttons, but when user inputted another time it should be show the new paragraph and same two buttons, but instead it just plusing for first number, please help me who knows because i stuck on this thing for too long. Here is my html:

And this is js:

// creating the array for how many people come
const peopleArray = [];

// seperateOrAll();

function addPeople() {
  /* reading the document from button input and converting
  it to the number
  */
  const inputForPeopleElement = document.querySelector('.howManyPeople');
  const people = Number(inputForPeopleElement.value);

  // adding the number of people to the array
  for (let i = 1; i <= people; i++) {
    peopleArray.push(i);
  }

  // doing the value 0/nothing when user gonna inputs new people 
  console.log(peopleArray);
  inputForPeopleElement.value = '';

  howManyHours();  // calling the function for knowing and creating new divs for people
}

/* reading the button by the id and if user clicks
it does two actions  
*/

let acceptButton = document.getElementById('js-accept');
acceptButton.addEventListener('click', addPeople);
acceptButton.addEventListener('click', acceptedClick);

/*
creating function for knowing if user clicks innit 
the button changes 
*/
function acceptedClick() {
  const changeAcceptanceElement = document.querySelector('.accept');
  if (changeAcceptanceElement.innerText === 'Принять') {
    changeAcceptanceElement.innerText = 'Принято';
  }
  // Add a setTimeout function to revert the button text after a delay
  setTimeout(function () {
    changeAcceptanceElement.innerText = 'Принять';
  }, 1000); // Change the delay value (in milliseconds) as needed
}


let personOneOrMany = 0;

let htmlForPersons = '';


// a new function for creating a new div for each person
function howManyHours() {

  let howManyHoursHtml = ''; // for storing the result 
  for (let i = 0; i < peopleArray.length; i++) {
    personOneOrMany++;
  }

  
  const html = `<p> ${personOneOrMany} человек </p>
    <button class = "separate"> Раздельно </button>
    <button> Всем </button>`;
  howManyHoursHtml += html;

  // document.querySelector('.js-seperateOrAll').innerHTML = htmlForPersons;

  document.querySelector('.js-howManyHours').innerHTML = html
    ; // getting the js code to the html and showing on the page

  howManyHoursHtml = '';

  personOneOrMany = 0;
}

I tried to do the html in for loop, but it shows for every number of people, but i need just one paragraph with number of people not each of that, tried with appendChild() still doesn’t help it much