JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<script id="template1" type="text/html">
<tr>
  <td><label for="...">Zeile </label>
  </td>
  <td><input type="text" id="...">
  </td>
  <td><select id="..." >
         <option></option>
         <option>Blah</option>
         <option>Fasel</option>
         <option>Tröt</option>
      </select>
  </td>
  <td><button type="button">SAVE</button>
  </td>
</tr>
</script>

<table id="theTable">
<thead>
  <tr><th>Titel</th><th>Eingabe</th><th>Schnell</th><th></th></tr>
</thead>
<tr>
  <td><label for="in1_1">Zeile 1</label>
  </td>
  <td><input type="text" id="in1_1">
  </td>
  <td>
  </td>
  <td><button type="button" id="btn1_1">SAVE</button>
  </td>
</tr>
</table>
<button type="button" id="addrow">
Neu
</button>

CSS

#theTable { 
  border-collapse: collapse; 
}
#theTable td:nth-of-type(1) {
  width: 10em;
}

#theTable td:nth-of-type(2) input {
  width: 20em;
}

#theTable th, #theTable td {
  text-align: left; border: 1px solid black;
}

JavaScript

$("#addrow").click(function() {
   let nextIndex = $("#theTable tr").length + 1;  // Nächste laufende Nummer
   let $newRow = $($("#template1").text());       // Row-Template erzeugen
   let $cells = $newRow.find("td");               // die Zellen der Row
   
   $("label", $cells[0])
      .attr("for", "in1_"+nextIndex)
      .text("Zeile " + nextIndex);
   $("input", $cells[1]).attr("id", "in1_"+nextIndex);
   $("#theTable").append($newRow);
});

$("#theTable").on("click", "button", function(evt) {
   let rowid=$(evt.target).closest("tr").find("label").attr("for");
   alert("You clicked for input " + rowid);
});

$("#theTable").on("change", "select", function(evt) {
   $(evt.target).closest("tr").find("input").val(evt.target.value)
});