Interactive Calculator Using Vite and Flexbox

There's this bug where the console doesn't log the tips properly which results in sometimes the tip value resulting in 0, even when a tip button is pressed, here's a snippet of the code.

const keys = document.querySelector('.tips')
console.log(keys)

"change click".split(" ").forEach(function(e){
  keys.addEventListener(e, e => {
    let id = e.target.id
    if (id === "custom") {
      tip = Number(e.target.value)/100
    } else {
      tip = Number(id)
    }
    console.log(tip)
    output()
  })
});

and the html

        <div class="percent">
          <h4>Select Tip %</h4>
          <div class="tips">
            <button class="tip" data-action="5%" id="0.05">
              <h2>5%</h2>
            </button>
            <button class="tip" data-action="10%" id="0.1">
              <h2>10%</h2>
            </button>
            <button class="tip" data-action="15%" id="0.15">
              <h2>15%</h2>
            </button>
            <button class="tip" data-action="25%" id="0.25">
              <h2>25%</h2>
            </button>
            <button class="tip" data-action="50%" id="0.5">
              <h2>50%</h2>
            </button>
            <input class="tip" id="custom" type="percent" placeholder="Custom"/>
          </div>