JSFiddle - React, Tailwind, and code Playground

HTML

<button id="addNewEntryButton">Ajouter une ligne</button>

  <form action="">

    <table id="ajout">

      <thead>

        <tr>
          <th style="border: 1px solid black;">lieu de la zone</th>
          <th style="border: 1px solid black;">anomalies</th>
          <th style="border: 1px solid black;">photo</th>
        </tr>

      </thead>

      <tbody>
        <!-- Contenu dynamique du tableau -->
      </tbody>

    </table>

  </form>

CSS

#addNewEntryButton {
      margin: 1em auto;
      display: block;
      padding: .5em;
      border: 1px solid black;
      background-color: #eee;
    }

    table {
      text-align: center;
      border-collapse: collapse;
      width: 1000px;
      margin: auto;
      padding-bottom: 10px;
    }

    td {
      border: 1px solid black;
    }

    textarea {
      width: 250px;
      margin-top: 8px;
      margin-bottom: 5px;
      height: 20px;
    }

JavaScript

const addNewEntryButton = document.getElementById("addNewEntryButton")
const tableTbody = document.querySelector("#ajout tbody")

addNewEntryButton.onclick = () => {
  const entryNumber = tableTbody.childElementCount
  const tr = document.createElement("tr")

  tr.innerHTML =
    `<td><textarea name="lieu${entryNumber}" rows="4" cols="40">Lieu n°${entryNumber}</textarea></td>` +
    `<td><textarea name="ano${entryNumber}" rows="4" cols="40">Anomalies n°${entryNumber}</textarea></td>` +
    `<td><input    name="fichier${entryNumber}" type="file" placeholder="oii" multiple><br></textarea></td>`

  tableTbody.appendChild(tr)
}