JSFiddle - React, Tailwind, and code Playground
HTML
<select id="select">
<option>Statement of Account</option>
<option>Disconnection Notice</option>
</select>
<input type="text" name="yes" id="txt" onkeyup="barcode()">
<table>
<thead>
<tr class="table-header">
<td class="table-cell">Type</td>
<td class="table-cell">Barcode</td>
</tr>
</thead>
<tbody id="myTable">
<tr class="table-row">
<td class="table-cell-text">
</td>
<td class="table-cell-text">
</td>
</tr>
</tbody>
</table>
CSS
.table-header{
}
.table-cell{
width:100px;
height:20px;
}
JavaScript
function barcode(){
var inp = $("#txt");
var tbl = document.getElementById("myTable");
if (event.keyCode == 13) {
if (inp.val().length > 0) {
var trow = document.createElement('tr');
var tdata_type = document.createElement('td');
var tdata_code = document.createElement('td');
tdata_type.textContent = $("#select option:selected").text();
tdata_code.textContent = inp.val();
trow.appendChild(tdata_code);
trow.appendChild(tdata_type);
tbl.insertBefore(trow,tbl.firstChild);
}else{
alert("Barcode length insufficient");
}
inp.val('');
}
}