JSFiddle - React, Tailwind, and code Playground
HTML
<!--<form>-->
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p> ASME Email: </p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th> Technology </th>
<th> Markets </th>
<th> Enduring/Emerging </th>
<th> ASME Relevency </th>
<th> Comments </th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
<label>adsw</label>
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
<button id="add_btn">Add new row</button>
<input type="submit" name="submit" value="Submit">
<!--</form>-->
JavaScript
function addRow() {
var table = document.getElementById('myTable');
var columnLength = table.getElementsByTagName('tr')[0].children.length;
var units = document.getElementsByClassName('unit-table');
var tr = document.createElement('tr');
tr.className = 'unit-table';
//for(var i = 0; i < columnLength; i++){
var td = document.createElement('td');
var text = document.createElement('input');
text.type = 'text';
td.appendChild(text);
tr.appendChild(td);
//}
table.appendChild(tr);
}
document.getElementById('add_btn').onclick = addRow;