Add Task SO Help

HTML

<html>

<head>
    <script src="jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="mainContainer">

        <div id="topContainer">

            <div id="navBarContainer">
                <nav class="navBar">

                    <span role="link" tabindex="0" class="logo">
			                     <img src="assets/images/icons/head_emerald.png">
		                </span>



                    <div class="group">
                        <div class="navItem">
                            <span role="link" tabindex="0" onclick="document.getElementById('addEmployee').style.display='inline-block'" class="navItemLink">Add Employee</span>
                        </div>

                        <div class="navItem">
                            <span role="link" tabindex="0" onclick="document.getElementById('addTask').style.display='inline-block'" class="navItemLink">Add Task</span>
                        </div>


                    </div>

                </nav>
            </div>

            <div id="mainViewContainer">
                <div id="mainContent">
                    <div class="gridViewContainer">
                      <h2 align="center">Scheduling Calendar</h2>

                        <script>
                          var sysDate = new Date();
                          var sysDay = new Date();
                          var sysMonth = new Date();
                          var dayCount = sysDay.getDay();
                          var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
                          let employee;
                          let typeofKey;
                          let x = 1;
                          let y = 0;
                          let trInc= 0;
                          var drawTable = '<table id = wholeTable>';
                          drawTable += "<thead>";
                          drawTable += "<tr>";
                          drawTable += "<th...

CSS

table {
  border: 0.0625em solid black;
  table-layout: fixed;
  position: relative;
  width: auto;
  overflow: hidden;
  border-collapse: collapse;
}

html, body{
  height: 100%;
  width: 100%;
}

/*thead*/
thead {
  position: relative;
  display: block; /*seperates the header from the body allowing it to be positioned*/
  width: 1535px;
  overflow: visible;
  /* border: 1px solid black; */
}

thead th {
  min-width: 140px;
  max-width: 140px;
  height: 35px;
  text-align: center;
}

thead th:nth-child(1) {/*first cell in the header*/
  position: relative;
  display:float;
  min-width: 140px;
  background-color: black;
}

/*tbody*/
tbody {
  position: relative;
  display: block; /*seperates the tbody from the header*/
  width: 1535px;
  height: 475px;
  overflow: scroll;
}

tbody td {
  background-color: white;
  min-width: 140px;
  max-width: 140px;
  border: 1px solid #222;
}

tbody tr td:nth-child(1) {  /*the first cell in each tr*/
  position: relative;
  display: block; /*seperates the first column from the tbody*/
  height: 40px;
  min-width: 140px;
  max-width: 140px;
}

.dragscroll {
  overflow-x: hidden;
  overflow-y: hidden;
  margin-right: 0;
}

.days,.employ {
  background-color: #071833;
  color: white;
  text-align: center;
}

#days, #emp{
background-color: #071833;
color: white;
}

body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */


/* Set a style for all buttons */
button {
    background-color: #071833;
    color: white;
    margin-top: 45px;
    float: right;




    border: none;
color: white;
padding: 7px 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;


}

#submitbtn{
      width: auto;
      padding: 10px 18px;
      background-color: green;
}

button:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and...

JavaScript

function create_employee(form){

let LocalData = localStorage.getItem(form.empName.value);


if(form.empName.value in localStorage){
  alert(form.empName.value + " already exsits. To add a task to " + form.empName.value + " use the addTask button.");
}else {
  // create a employee object to store the employee's name and taks info
  let employee = {
    "Employee Name"                 : form.empName.value,
    "Employee Id"                   : form.empId.value,
    "Task" : [],

        };

  // set the local storage to the new employee array
  localStorage.setItem(form.empName.value, JSON.stringify(employee));
}






}


function submit_json(form){

//console.log(form.emplName.value);

// pull from the local storage
//let employee = JSON.parse(localStorage.getItem(form.emplName.value);
let employee = localStorage.getItem($('#empDropDown').val());

employee = JSON.parse(employee);


// add task to the end of the task array for chosen employee
if('Task' in employee){
employee.Task.push({
  "Task Name"             : form.tskname.value,
  "Task Descripts"        : form.tskdes.value,
  "Task Start Date"       : form.tskstart.value,
  "Task End Date"         : form.tskend.value,
  "Task Status"           : form.tskStatus.value,
});
}

// overwrite the employee JSON in the local storage with the newly updated task array
localStorage.setItem(form.emplName.value, JSON.stringify(employee));





//console.log(employee);

}


function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

$(document).ready(function(){
  let typeofKey;
  let empArry = [];
  let employee;
  let myTable = document.getElementById('wholeTable');
  let colFill = false;
  let color = null;
        //cols of the employee names
  for (var i = 0; i < localStorage.length; i++){
      empArry.push(localStorage.key(i))
  }
  // loop through the local storage and pull the data
...