"use strict";
const btn = document.getElementById('toevoegen');
const keuzeLijst = document.getElementById('groente');
const aantalArt = document.getElementById('aantal');
leesGroenten();

// Read in the JSON file
async function leesGroenten() {
/* changed */
//    const response = await fetch("groenten.json")
/* start temporary .json */
    const response = {
    ok: true,
    json: async () => {
        return [{
          naam: "name 1",
          prijs: "price 1",
          eenheid : "unit 1"
        },
        {
          naam: "name 2",
          prijs: "price 2",
          eenheid : "unit 2"
        }]
      }
    }
/* end temporary .json */
    if (response.ok) {
        const groenten = await response.json();
        console.log(groenten);
        verwerkGroenten(groenten);
    } else {
        console.log("oops something went wrong!");
    }
};

// Process the JSON file
function verwerkGroenten(groenten) {
    for (const groente of groenten) {
        voegGroentenToeAanLijst(groente);
    }
};

// Add JSON file objects to the vegetable list
function voegGroentenToeAanLijst(groente) {
    let keuzeGroente = document.createElement("option");
    keuzeGroente.dataset.naam = groente.naam;
    keuzeGroente.dataset.prijs = groente.prijs;
    keuzeGroente.dataset.eenheid = groente.eenheid;
    keuzeGroente.dataset.aantal = 1;
    keuzeGroente.innerText = groente.naam + '(' + `${groente.prijs}` + "/" + `${groente.eenheid}` + ')';
    keuzeLijst.appendChild(keuzeGroente);

}

btn.onclick = controleLijst;

function controleLijst() {
    if (aantalArt.value === '' || aantalArt.value < 1) {
        document.getElementById('foutMelding').hidden = false;
    } else {
        document.getElementById('foutMelding').hidden = true;
    const groenteNaam = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam;
    let gevondenListItem = vindListItemMetNaam(groenteNaam);
    if (gevondenListItem === null) {
        voegGroenteToeAanMandje(groenteNaam)
    } else {
        //Not sure how to update cells if not found
        voegGroenteToeAanMandje(groenteNaam)
        updateListItem(gevondenListItem)
    }
}
}
//This function searches the table for an item with the same name as the selected vegetable.
function vindListItemMetNaam(groenteNaam) {
    const groenteNamen = document.querySelectorAll("tr");
    for (const groente of groenteNamen) {
        if (groente.id === groenteNaam) {
            return groente;
        }
    }
    return null;
}
//This function updates an existing item
function updateListItem() {
    console.log("already exists");

}
// After successful validation, the item is added to the table using the following code
function voegGroenteToeAanMandje() {
/* changed */
    const tbody = document.getElementById("tabel");
/* id is set in HTML already */
//    tbody.id = 'tabel'

/* check if TR with this id already exists */
    const exist = document.getElementById(keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam);
/* set tr to already existed row or insert a new one if it doesn't exist */
    const tr = exist || tbody.insertRow();
    tr.id = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam;
/* used to check existence of columns shorter method than alternative: if (exist) ... else ... */
    var child = 0;
/* get existing cell or insert new one */
    const tdNaam = tr.children[child++] || tr.insertCell();
/* do you really need an ID here? */
//    tdNaam.id = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam
    tdNaam.innerText = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam;
    const tdAantal = tr.children[child++] || tr.insertCell();
    tdAantal.innerText = 1;
/* avoid using same IDs on multiple elements */
//    tdAantal.id = 'quantity';
    const tdPrijs = tr.children[child++] || tr.insertCell();
    tdPrijs.innerText = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.prijs;
/* avoid using same IDs on multiple elements */
//    tdPrijs.id = 'price'
    const tdTeBetalen = tr.children[child++] || tr.insertCell();
    tdTeBetalen.innerText = tdPrijs.innerText;
/* avoid using same IDs on multiple elements */
//    tdTeBetalen.id = 'to pay';
/* static cell, no need to update if already exists */
    if (!exist)
    {
      const removeTd = tr.insertCell();
      const removeLink = document.createElement("img");
      removeLink.src = "trashcan.png"
      removeTd.appendChild(removeLink);
      removeLink.onclick = function () {
          const tr = this.parentElement.parentElement;
          tr.remove();
      }
    }
};

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="icon" href="javascript.ico" type="image/x-icon">
  <title>Vegetable Store</title>
  <link rel="icon" href="vegetablestore.ico" type="image/x-icon">
  <link rel="stylesheet" href="vegetablestore.css" />
  <script src="vegetablestore.js" defer></script>
</head>

<body>
  <img src="banner.jpg" id="banner" alt="banner">
  <h1>Order</h1>
  <label>Vegetable:
    <select id="groente">
      <option value="">--- make your choice ---</option>
    </select>
  </label>
  <label>Quantity:
    <input id="aantal">
  </label>
  <button id="toevoegen">Add to Cart</button>
  <button id="test">Test Button</button>
  <table id="tabel">
    <thead>
        <tr>
            <th>Vegetable</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>To Pay</th>
            <th>     </th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>
<div id="error" hidden class="error">Error! Choose vegetable and quantity (at least 1).</div>

<!-- added start -->
<div id="errorMessage">No clue what this is for</div>
<!-- added end -->

</body>

</html>