please take a look at blow code

const btn = document.createElement('button');
btn.innerText = 'button'
document.body.appendChild(btn)

btn.addEventListener('click', () => {
  setTimeout(() => {
   console.log('step1');
  },0)

  Promise.resolve().then(() => {
   console.log('step2')
  })
})
btn.addEventListener('click', () => {
  setTimeout(() => {
  console.log('step3');
 },0)

  Promise.resolve().then(() => {
   console.log('step4')
 })
})

when I click Button element, i can see what i expected as blow

"step2" "step1" "step4" "step3"

but console result is different as blow

"step2" "step4" "step1" "step3"

I don't understand why this occur. give me any answer please