Return many .appendChild() inside mapping on an array

Question

i want to have an element called 'dayere' for each item in numbers.but it just return one element for last number in numbers.what can I do!

let numbers = [4, 6, 10, 23, 0, 24, 30, 2];
let dayere = document.createElement('div')
dayere.style.width = '40px'
dayere.style.height = "40px"
dayere.style.borderRadius = '100%'
dayere.style.boxShadow = '0px 0px 10px 0.1px black'
dayere.style.backgroundColor = 'lightblue'
numbers.map((item)=>{
  dayere.innerHTML = item
  arr_place.appendChild(dayere)
})

Answer 1

You only create one div, if you want one for each item in the array you have to create the div in the map function.

let numbers = [4, 6, 10, 23, 0, 24, 30, 2];
numbers.map((item)=>{
  let dayere = document.createElement('div')
  dayere.style.width = '40px'
  dayere.style.height = "40px"
  dayere.style.borderRadius = '100%'
  dayere.style.boxShadow = '0px 0px 10px 0.1px black'
  dayere.style.backgroundColor = 'lightblue'
  dayere.innerHTML = item
  arr_place.appendChild(dayere)
})