JSFiddle - React, Tailwind, and code Playground

by adiga

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() {
    alert("works now");
    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('');
    }
  }