I've tried to code a simple 5 inputs(numbers) page to put the values into an array. Then, I want to extract each number value to "convert" them into 5 different stacks of boxes. I want to materialize these numbers into a more visual display. I have to use ONLY Vanilla JS. I'd like to create 5 different compartments to put these boxes.

here is my HTML, CSS and JS code. For the moment, I've found how to distinguish the different numbers using some conditional color styling.

let boxes = []
let length = boxes.length
const boxContainer = document.querySelector('#resultContainer')
const results = document.querySelector('.stack')
const button = document.querySelector('#qtyButton')
let getTas1
let getTas2
let getTas3
let getTas4
let getTas5

button.addEventListener('click', function() {
  fillArray()

  function fillArray() {
    getTas1 = document.querySelector('.Qty1').value
    getTas2 = document.querySelector('.Qty2').value
    getTas3 = document.querySelector('.Qty3').value
    getTas4 = document.querySelector('.Qty4').value
    getTas5 = document.querySelector('.Qty5').value
    boxes.push(getTas1, getTas2, getTas3, getTas4, getTas5)
  }

  boxes.forEach((res) => displayBoxes(res))

  
})

function displayBoxes(res) {
  for (b = 0; b < res; b  ) {
    let box = document.createElement('div')
    box.classList.add('compart')
    switch (res) {
      case getTas1:
        box.classList.add('red')
        break
      case getTas2:
        box.classList.add('blue')
        break
      case getTas3:
        box.classList.add('green')
        break
      case getTas4:
        box.classList.add('yellow')
        break
      case getTas5:
        box.classList.add('pink')
        break
    }

    box.innerHTML = `<div></div>`
    results.appendChild(box)
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 1050px;
  margin: auto;
}

.formContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 25%;
  border: 2px solid red;
  justify-content: space-evenly;
}

.buttonZone {
  display: flex;
  justify-content: center;
}

.formTitle {
  display: flex;
  justify-content: center;
}

.inputZone {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

#resultContainer {
  display: flex;
  border: 2px solid blue;
  width: 100%;
  height: 25%;
}

.stack {
  display: flex;
  align-items: center;
}

.compart {
  display: flex;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 3px;
}

.case {
  display: flex;
  width: 20%;
  border: 1px solid grey;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.pink {
  background-color: pink;
}

<div >
  <div >
    <div >How many boxes ?</div>
    <div >
      <input type="number" >
      <input type="number" >
      <input type="number" >
      <input type="number" >
      <input type="number" >
    </div>
    <div >
      <button id="qtyButton">Go</button>
    </div>
  </div>
  <div id="resultContainer">
    <div ></div>
  </div>
</div>

Thank you in advance