Ubuntu – Why is the click giving 2 instead of 1 in this HTML?

let num = 0;
let upgrade = 1;
let noCookiesCheck = 0;
let isThereNoCookies = false;
let mouseupgrade = 0;
let autoClickInterval = 1000; // Interval in milliseconds
let upgradeInflation = 1;

function checker() {
  document.getElementById("cookieCount").innerHTML = num;
  document.getElementById("grandma").innerHTML = upgrade - 1;
  if (isThereNoCookies && noCookiesCheck >= 1) {
    document.getElementById("noCookies").innerHTML = " Not enough Cookies!";
    noCookiesCheck -= 20;
  } else {
    document.getElementById("noCookies").innerHTML = ""; // Clear the message
    isThereNoCookies = false; // Reset the flag
  }
  document.getElementById("inflationCase").innerHTML = Math.floor(20 * upgradeInflation);
}

function cookieClick() {
  num += upgrade;

}

function darker() {
  var body = document.body;
  var cookies = document.getElementsByClassName("cookie");
  for (var i = 0; i < cookies.length; i++) {
    cookies[i].style.backgroundColor = "#390100";
  }
  body.style.backgroundColor = "#3b53ff";
}

function b1() {
  const cost = Math.floor(20 * upgradeInflation);
  if (num >= cost) {
    num -= cost;
    upgrade += 1;
    upgradeInflation += 0.15;
  } else {
    noCookiesCheck = 5000; // Set a longer duration
    isThereNoCookies = true;
  }
}

function b2() {
  const cost = 10; // Fixed cost for auto-click
  if (num >= cost) {
    num -= cost;
    mouseupgrade += 1;
    document.getElementById("mouseclick").innerHTML = mouseupgrade;
  } else {
    noCookiesCheck = 5000; // Set a longer duration
    isThereNoCookies = true;
  }
}

// Auto increment cookies based on mouseupgrade
function autoCookieClick() {
  if (mouseupgrade > 0) {
    num += mouseupgrade;
  }
}

// Call checker() every 100 milliseconds
setInterval(checker, 100);

// Call autoCookieClick() every second
setInterval(autoCookieClick, autoClickInterval);

// Adding event listeners
document.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".darkMode").addEventListener("click", darker);
  document.getElementById("b1").addEventListener("click", b1);
  document.getElementById("b2").addEventListener("click", b2);
  document.querySelector(".cookie").addEventListener("click", cookieClick);
});

body {
  background-color: rgb(0, 110, 255);
  font-family: "Ubuntu", sans-serif;
}

body,
.cookie {
  transition: background-color 0.5s ease;
}

.counter {
  background-color: rgb(55, 96, 185);
  font-family: "Ubuntu", sans-serif;
  border-radius: 10%;
  height: 100px;
  width: 300px;
  text-align: center;
  position: fixed;
  top: 10px;
  left: 40%;
}

.darkMode {
  background-color: gray;
  border-radius: 20%;
  height: 100px;
  width: 100px;
  text-align: center;
  position: fixed;
  top: 110px;
  left: 10px;
}

.cookie {
  background-color: brown;
  border-radius: 50%;
  height: 500px;
  /* Set a fixed height */
  width: 500px;
  /* Set the same width to make it a circle */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Center the element */
}

.buttonConcept,
#b1,
#b2,
#b3 {
  background-color: blue;
  color: aliceblue;
  height: 200px;
  border-radius: 10px;
  width: 300px;
}

#b1 {
  position: fixed;
  top: 10px;
  right: 10px;
}

#b2 {
  position: fixed;
  top: 210px;
  right: 10px;
}

<div class="counter">Cookies: <span id="cookieCount">0</span></div>
<div class="darkMode" onclick="darker()">Dark Mode Button:</div>
<div id="b1" onclick="b1()">(<span id="inflationCase">20</span> cookies for) Grandmas: <span id="grandma">0</span><span id="noCookies"></span></div>
<div id="b2" onclick="b2()">Auto Clicks: <span id="mouseclick">0</span></div>
<div class="cookie" onclick="cookieClick()"></div>