JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <div id="data">
    <form id="person" method="POST" action="/path/to/php/page.php">
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <div class="col-12" style="width: 1514px">
        <select id="locapavm" name="pavlocation" style="width: 26%">
          <option value="">- Location -</option>
          <option value="Runway 17">Runway 17</option>
          <option value="Runway 35">Runway 35</option>
          <option value="Runway 18">Runway 18</option>
          <option value="Runway 36">Runway 36</option>
        </select><br>
        <div class="col-12">
          <select id="ddlPassport" name="ddlPassport" style="width: 26%" onchange="ShowHideDiv()">
            <option value="">- Pavement Type -</option>
            <option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
            <option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
          </select>
        </div><br />
        <div class="col-12" style="width: 1514px">
          <select id="pavdistrees" name="pavedist" style="width: 26%">
            <option value="">- Distress selections - </option>
          </select><br> </div>
        <div class="col-12" style="width: 1514px">
          <select id="sevepavm" name="pavseverity" style="width: 26%">
            <option value="">- Severity -</option>
            <option value="Low">Low</option>
            <option value="Medium"> Medium</option>
            <option value="High">High</option>
          </select><br> </div>
        <!----------------------------------------------------------------------->
        <p class="auto-style1">Maintenance Plan:</p>
        <textarea id="planpavm" name="pavplan" style="width: 572px; height: 129px"></textarea><br>
        <input id="reset" type="reset" value=" Reset " onclick="ResetForm()">
        <input id="button" type="submit" value=" Add ">
      </div>
    </form>
    <div id="tab" style="width: 76%">
  ...

JavaScript

$("#person").submit(function(d) {
  d.preventDefault();
  AddData(new FormData(d.target));
})

function AddData(form) {
  var x = document.getElementById("pavdistrees").value;
  var y = document.getElementById("locapavm").value;
  var letters = '/^[a-zA-Z]+$/';
  if ((parseInt(x) != (x)) && (y == parseInt(y))) {
    alert("Wrong Value Entered");
  } else {
    var rows = "";
    var name = document.getElementById("locapavm").value;
    var gender = document.getElementById("ddlPassport").value;
    var age = document.getElementById("pavdistrees").value;
    var city = document.getElementById("sevepavm").value;
    var plan = document.getElementById("planpavm").value;

    rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = deleterow(this)>Delete</button></td></tr>";
    $(rows).appendTo("#list tbody");
  }
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action);
  xhr.send();
}

function ResetForm() {
  document.getElementById("person").reset();
}

function deleterow(el) {
  $(el).closest('tr').remove();
}