Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

These two tests:
test 7:
When price is 3.26 , the value in the #cash element is 100 , cid is [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]] , and the #purchase-btn element is clicked, the value in the #change-due element should be Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04.
test 10:
When price is 19.5 , the value in the #cash element is 20 , cid is [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]] , and the #purchase-btn element is clicked, the value in the #change-due element should be Status: CLOSED QUARTER: $0 DIME: $0 NICKEL: $0 PENNY: $0.5.
keep failing even though the output is exactly the same. I used https://www.diffchecker.com/ to check the difference between the required text and the text inside #change-due and they are exactly the same
test 7:


test: 10:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="UTF-8" />
  <title>Hello, world!</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <input type="number" id="cash">
  <button id="purchase-btn" type="button">Purchase</button>
  <div id="change-due"></div>
  <script src="script.js"></script>
</body>
</html>
/* file: styles.css */

/* file: script.js */
let price = 3.26;
let cid = [
  ["PENNY", 1.01],
  ["NICKEL", 2.05],
  ["DIME", 3.1],
  ["QUARTER", 4.25],
  ["ONE", 90],
  ["FIVE", 55],
  ["TEN", 20],
  ["TWENTY", 60],
  ["ONE HUNDRED", 100],
];
let values = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100];
const cashInput = document.getElementById("cash");
const btn = document.getElementById("purchase-btn");
const result = document.getElementById("change-due");
const check = () => {
  let cash = Number(cashInput.value);
  if (!cash) return;
  else if (cash < price)
    alert("Customer does not have enough money to purchase the item");
  else if (cash === price)
    result.textContent = "No change due - customer paid with exact cash";
  else {
    cid.reverse();
    values.reverse();
    let due = cash - price;
    let change = {};
    let idx = 0;
    while (due > 0 && idx < cid.length) {
      if (due >= values[idx] && cid[idx][1] - values[idx] >= 0) {
        due = Math.round((due - values[idx]) * 100) / 100;
        cid[idx][1] = Math.round((cid[idx][1] - values[idx]) * 100) / 100;
        change[cid[idx][0]] = change[cid[idx][0]]
          ? Math.round((change[cid[idx][0]] + values[idx]) * 100) / 100
          : values[idx];
      } else 
        idx++;
      
    }
    result.textContent = `Status: ${
      idx >= cid.length
        ? "INSUFFICIENT_FUNDS"
        : cid.every((el) => el[1] === 0)
        ? "CLOSED"
        : "OPEN"
    }`;
    if (idx >= cid.length) return;
    cid.forEach((el) => {
      if (change.hasOwnProperty(el[0]))
        result.textContent += ` ${el[0]}: $${change[el[0]]}`;
    });
  }
};
btn.addEventListener("click", check);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-cash-register-project/build-a-cash-registe

“values” array is mutating when you are using reverse function. So the “values” array is not the same in the next run and so the tests are failing