innerHTML not showing up despite it being called

Question

This bug is actually pissing me off lol so i want to make a quiz game and each question will be updated based on the objects inside the question variable and everything is working but num.innerHTML = ${ques.id} and i do not know why

let score = 0
let i = 0

const prev = document.querySelector("#prev")
const next = document.querySelector("#next")

const num = document.querySelector("#num")
const q = document.querySelector("#question")

const ans1 = document.querySelector("#ans1")
const ans2 = document.querySelector("#ans2")
const ans3 = document.querySelector("#ans3")
const ans4 = document.querySelector("#ans4")

const questions = [{
    id: 1,
    q: "What is the capital of Indonesia?",
    a1: "Jakarta",
    a2: "Bandung",
    a3: "Surabaya",
    a4: "Bali",
    c: "Jakarta"
  },
  {
    id: 2,
    q: "Who won the 2017 NBA MVP Award?",
    a1: "Lebron James",
    a2: "Russell Westbrook",
    a3: "Kawhi Leonard",
    a4: "James Harden",
    c: "Russell Westbrook"
  }
]

function update(ques) {
  num.innerHTML = `${ques.id}`
  q.innerHTML = ques.q

  ans1.innerHTML = ques.a1
  ans2.innerHTML = ques.a2
  ans3.innerHTML = ques.a3
  ans4.innerHTML = ques.a4
}

update(questions[0])

<div class="container">
  <div id="question">
    <div id="num">1.</div>
    <div id="ques">What is 10 x 10</div>
  </div>
  <div id="answers">
    <div id="ans1" class="button">100</div>
    <div id="ans2" class="button">40</div>
    <div id="ans3" class="button">25</div>
    <div id="ans4" class="button">1</div>
  </div>
  <div id="toggle">
    <div id="prev">Prev</div>
    <div id="next">Next</div>
  </div>
</div>

Answer 1

#num is contained in #question, and you are updating the whole #question innerHTML.

Solution, use #ques:

const q = document.querySelector("#ques");