Cash Register project

This Code works correctly and the tests fail, it must pass i tested it let price = 1.87;

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]
];
cid.forEach(arr => drawer.innerHTML += `<br>${arr[0]}: $${arr[1]}`)
let reversedCid = cid.slice().reverse();
const purchaseBtn = document.getElementById('purchase-btn');
//to log anything to console easier using log();
const log = arg => console.log(arg);
const priceDiv = document.getElementById('price-div');
let changeDue = document.getElementById('change-due');
const fix = arg => parseFloat((arg).toFixed(2));
log(fix(2.1 * 100))
priceDiv.textContent = `price : $${price}`
purchaseBtn.addEventListener('click',()=>{
  let cash = parseFloat(document.getElementById('cash').value);
  if(cash < price){
    alert("Customer does not have enough money to purchase the item");
  }else if(cash == price){
    changeDue.textContent = "No change due - customer paid with exact cash";    
  }else{ 
    let x = JSON.parse(JSON.stringify(reversedCid));
    const amount =[100,20,10,5,1,0.25,0.1,0.05,0.01]; 
   
    let fixedCash = fix(cash - price);
    let due = [ ["ONE HUNDRED", 0],
                ["TWENTY", 0],
                ["TEN", 0],
                ["FIVE", 0],
                ["ONE", 0],
                ["QUARTER", 0],
                ["DIME", 0],
                ["NICKEL", 0],
                ["PENNY", 0]
    ]; 
    amount.forEach((num, index) => {
      while (fixedCash >= num && reversedCid[index][1] >= num) { 
        fixedCash = fix(fixedCash - num);
        due[index][1] = fix(due[index][1] + num);
        reversedCid[index][1] = fix(reversedCid[index][1] - num);
      }
    });
    
    if (fixedCash !== 0) {
      log(cid)
      reversedCid = x;
      fixedCash = fix(cash - price);
      changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
    } else {
      cid = [["PENNY", reversedCid[8][1]],
             ["NICKEL", reversedCid[7][1]],
             ["DIME", reversedCid[6][1]],
             ["QUARTER", reversedCid[5][1]],
             ["ONE", reversedCid[4][1]],
             ["FIVE", reversedCid[3][1]],
             ["TEN", reversedCid[2][1]],
             ["TWENTY", reversedCid[1][1]],
             ["ONE HUNDRED", reversedCid[0][1]
      ]];             
      drawer.innerHTML = '<b>changes in cid:</b>';
      cid.forEach(arr => drawer.innerHTML += `<br>${arr[0]}: $${arr[1]}`)
      due = due.filter(num => num[1] !== 0)
      changeDue.innerHTML = "Status: OPEN";
      due.forEach(arr => changeDue.innerHTML += `<br>${arr[0]}: $${arr[1]}`)  
    }
  }
})

This code passed the project requirement but tests fail, I think the problem in tests bot
Copy this code html code, and css code too to know,
Start of css

html{
  font-family:sans-serif;
  letter-spacing:1.5px;
  word-wrap:break-word;
}
h1,h5{
  text-align:center;
}
body{
  background:wheat;
}
.container{
position:absolute;
border:4px outset yellow;
width:500px;
height:700px;
box-shadow:0 0 10px 0;
margin-left:0;
background:grey;
color:white;
top:150px;
}

#cash{
position:absolute;
padding:5px;
top:2px;
border:5px outset yellow;
background:blue;
color:white;
left:280px;

}
#drawer{
  position:absolute;
  bottom:0px;
  right:0px;
  left:0px;
  height:200px;
  background:white;
  border-top:yellow 5px solid;
  color:black;
  

}
#purchase-btn{
  position:absolute;
  top:50px;
  width:200px;
  height:50px;
  font-size:20px;
  left:150px;
}
#purchase-btn:hover{
  cursor:pointer;
}
#cash-label{
  position:absolute;
  top:10px;
}
#change-due{
  
  height:320px;
  position:absolute;
  left:10;
  right:10;
  top:120px;
}
#price-div{
  position:absolute;
  bottom:200px;
  padding:5px;
  left:190px;
  text-align:center;
  border:3px yellow outset;
  background:black;
  color:red;
}

Start of HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">

    <title>Cash Register</title>
</head>
<body>
    <h1>Cash Register</h1>
    <div class="container">
    <label for="cash"id="cash-label">
        Enter the price from customer:</label><input type="number" id="cash">
        <button type="button" id="purchase-btn">Purchase</button>
        <div id="change-due"></div>
        <div id="price-div"></div>
        <div id="drawer">
            <b>changes in cid:</b>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

I ran your code and price is throwing an Uncaught ReferenceError: price is not defined

I sent a wrong code sorry, this is the correct one

let price = 1.87;
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]
];
cid.forEach(arr => drawer.innerHTML += `<br>${arr[0]}: $${arr[1]}`)
let reversedCid = cid.slice().reverse();
const purchaseBtn = document.getElementById('purchase-btn');
//to log anything to console easier using log();
const log = arg => console.log(arg);
const priceDiv = document.getElementById('price-div');
let changeDue = document.getElementById('change-due');
const fix = arg => parseFloat((arg).toFixed(2));
const cashEl = document.getElementById('cash');
log(fix(2.1 * 100))
priceDiv.textContent = `price : $${price}`
function checkCashRegister(){
    let cash = parseFloat(document.getElementById('cash').value);
  if(cash < price){
    alert("Customer does not have enough money to purchase the item");
  }else if(cash == price){
    changeDue.textContent = "No change due - customer paid with exact cash";    
  }else{ 
    let x = JSON.parse(JSON.stringify(reversedCid));
    const amount =[100,20,10,5,1,0.25,0.1,0.05,0.01]; 
   
    let fixedCash = fix(cash - price);
    let due = [ ["ONE HUNDRED", 0],
                ["TWENTY", 0],
                ["TEN", 0],
                ["FIVE", 0],
                ["ONE", 0],
                ["QUARTER", 0],
                ["DIME", 0],
                ["NICKEL", 0],
                ["PENNY", 0]
    ]; 
    amount.forEach((num, index) => {
      while (fixedCash >= num && reversedCid[index][1] >= num) { 
        fixedCash = fix(fixedCash - num);
        due[index][1] = fix(due[index][1] + num);
        reversedCid[index][1] = fix(reversedCid[index][1] - num);
      }
    });
    
    if (fixedCash !== 0) {
      log(cid)
      reversedCid = x;
      fixedCash = fix(cash - price);
      changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
    } else {
      
      cid = [["PENNY", reversedCid[8][1]],
             ["NICKEL", reversedCid[7][1]],
             ["DIME", reversedCid[6][1]],
             ["QUARTER", reversedCid[5][1]],
             ["ONE", reversedCid[4][1]],
             ["FIVE", reversedCid[3][1]],
             ["TEN", reversedCid[2][1]],
             ["TWENTY", reversedCid[1][1]],
             ["ONE HUNDRED", reversedCid[0][1]
      ]];
      let cidSum = 0;    
      cid.forEach(num => cidSum += num[1])
      drawer.innerHTML = '<b>changes in cid:</b>';
      cid.forEach(arr => drawer.innerHTML += `<br>${arr[0]}: $${arr[1]}`)
      due = due.filter(num => num[1] !== 0)
      changeDue.innerHTML = cidSum !== 0 ? "Status: OPEN" : "Status: CLOSED";
      due.forEach(arr => changeDue.innerHTML += `<br>${arr[0]}: $${arr[1]}`)  
    }
  }
}
purchaseBtn.addEventListener('click',checkCashRegister)
cashEl.addEventListener('keydown',k=>{
if(k.key === 'Enter'){
 checkCashRegister();
}
})

Note: half tests passed