Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>Show BMWs</button>
    <button>Show VWs</button>
    <button>Show ALL</button>

    <table>
      <thead>
        <tr>
          <th>Brand</th>
          <th>Model</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <!--Lenteles shortcut:      table>thead>tr>th + tab      -->

    <script defer>
      const tbody = document.querySelector("tbody");
      fetch("https://back-end-js-x8whq.ondigitalocean.app/")
        .then((res) => res.json())
        .then((data) =>
          data.forEach((item) => {
            displayTable(data);
          })
        );

      // BMW mygtukas
      document.querySelector("button").addEventListener("click", () => {
        fetch("https://back-end-js-x8whq.ondigitalocean.app/bmw")
          .then((res) => res.json())
          .then((data) => displayTable(data));
      });

      //   VW mygtukas
      document
        .querySelector("button:nth-child(2)")
        .addEventListener("click", () => {
          fetch("https://back-end-js-x8whq.ondigitalocean.app/vw")
            .then((res) => res.json())
            .then((data) => displayTable(data));
        });

      // ALL mygtukas
      document
        .querySelector("button:nth-child(3)")
        .addEventListener("click", () => {
          fetch("https://back-end-js-x8whq.ondigitalocean.app/")
            .then((res) => res.json())
            .then((data) => displayTable(data));
        });

      function displayTable(array) {
        tbody.innerHTML = "";

        array.forEach((item) => {
          const tr = tbody.insertRow();

          const td1 = tr.insertCell();
          td1.textContent = item.brand;

          const td2 = tr.insertCell();
          td2.textContent = item.model;
        });
      }
    </script>
  </body>
</html>