JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>POS</title>
  </head>

  <body>
    <button class="btn" id="cola">Cola</button>
    <button class="btn" id="fanta">Fanta</button>
    <script>
     
    </script>
  </body>
</html>

JavaScript

const btnChoose = document.querySelectorAll(".btn");

  const drinks= {
    cola: 4,
    fanta: 3,
  };
    let sum = null;
  for (let i = 0; i < btnChoose.length; i++) {

    btnChoose[i].addEventListener("click", function () {
      let price = drinks[this.id];
      sum += price;
      console.log(typeof sum, sum);
    });
  }