local-db.html

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content"width=device-width">
  <title>MDT</title>
</head>
<body>

<h2>DISPATCH DATABSE</h2>

<form actionq="/Dispatch">
  <label for="callsign">Callsign:</label><br>
  <input type="text" id="callsign" name="callsign"><br>
  <label for="status">Select status:</label><br>
  <select name="status" id="status">
    <option value="Available">Available</option>
    <option value="Busy">Busy</option>
    <option value="Unavailable">Unavailable</option>
    <option value="Traffic Stop">Traffic Stop</option>
    <option value="Scene">Scene</option>
    <option value="Radar">Radar</option>
    <option value="Game Crash">Game Crash</option>
  </select><br>
  <label for="postal">Nearest Postal:</label><br>
  <input type="text" id="postal" name="postal"><br>
  <button onclick="addRow()">ADD</button>
</form> <br><br>

<table border="1" id="Units">
  <thead>
    <tr>
     <th>Callsign</th>
     <th>Status</th>
     <th>Location</th>
    </tr>
  </thead>
    <tbody id="screen">
  </tbody>
</table>

</body>

  <script>
    $( document ).ready(function(){
      //load records
      $('#screen').html(localStorage.getItem("data"));
    });
    function addRow(){
      //search for any existing record first.
      //note: record match is based on case-sensitive callsign name
      var callsignText = $('#callsign').val().trim();
      var statusText = $('#status').val().trim();
      var postalText = $('#postal').val().trim();
      var theRow = $('#screen tr').filter(function(index, row) {
        var firstColumn = $(row).find('td:first-child');
        return firstColumn.text() === callsignText;
      });
      if (theRow.length === 0) { //no match. add new
        //note: it's recommended to populate element text content using
        //      `text()` instead of `append()` or `html()` for reliable result.
        $('#screen').append('<tr class = "boxType"><td></td><td></td><td></td></tr>');
        theRow = $('#screen tr:last-child');
        //populate the first row
        theRow.find('td:nth-child(1)').text(callsignText);
      }
      //populate/update second and third rows
      theRow.find('td:nth-child(2)').text(statusText);
      theRow.find('td:nth-child(3)').text(postalText);
      //save records
      localStorage.setItem("data", $('#screen').html());
    }
  </script>
</html>