JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<table border="1" id="engagements">
<tr>
<th>
<input type="checkbox" onclick="checkAll(this)" />
</th>
<th>Organization</th>
<th>Project</th>
<th>Product</th>
<th>Activity</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="checkAll(this)" />
</td>
<td>
<select>
<option value = "1">One</option>/>
<option value = "1">two</option>/>
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<select name="mode" id="mode">
<option value="">Add More Rows with Same Data as Above</option>
<option value="1">1 More</option>
<option value="2">2 More</option>
<option value="3">3 More</option>
<option value="4">4 More</option>
<option value="5">5 More</option>
</select>
</form>
JavaScript
$("#mode").on('change', function () {
var rows = parseInt(this.value);
console.log(rows);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});