JSFiddle - React, Tailwind, and code Playground

HTML

<datalist id="areaList">
        <option value="Plant rooms">Plant rooms</option>
        <option value="Attic">Attic</option>
        <option value="Cleaning cupboard">Cleaning cupboard</option>
      </datalist>

 <table id="table1">
        <tr>
          <th>Area not inspected</th>
          <th>Reason</th>
          <th></th>
        </tr>
        <tr>
          <td><input list="areaList" name="area[0]" id="area"></td>
          <td><input list="reason" name="reason[0]"></td>
          <td><button type="button" onClick="addRow('table1')">+</button></td>
        </tr>
      </table>

JavaScript

function addRow() {
	"use strict";
	var table = document.getElementById("table1");
	var r = table.rows.length;
	var a = r - 1;
	var row = table.insertRow(r);
	
	var cell1 = row.insertCell(0);
	var element1 = document.createElement("input");
	element1.type = "text";
	element1.name="area["+a+"]";
	cell1.appendChild(element1);
	
	var cell2 = row.insertCell(1);
	var element2 = document.createElement("input");
	element2.type = "text";
	element2.name="reason["+a+"]";
	cell2.appendChild(element2);
	
	var cell3 = row.insertCell(2);
	cell3.innerHTML = "<button type='button' onClick='delRow(&quot;table1&quot;, this)'>remove</button>";
}

function delRow(tableID, r) {
	"use strict";
	var td = r.parentNode;
	var tr = td.parentNode;
	var row = tr.rowIndex;
    document.getElementById(tableID).deleteRow(row);
}