JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<title>Task Form</title>

<body>
    <form class="form-inline" name="myForm" onsubmit="return submitForm()">
        <label class="required">*Task and Description* </label>

        <!first text box>
        <div class="form-group">
            <input type="text" id="task" placeholder="Task">
        </div>

        <!second comment box>
        <div class="form-group">
            <input type="text" id="description" placeholder="Description">
        </div>
        <button type="submit" class="btn btn-default submit">Submit</button>
    </form>



    <script type="text/javascript " src="json.js "></script>
<script>
function submitForm() {
    var task = myForm.task.value;
    var desc = myForm.description.value;
    var FormData = {
        task: task,
        description: desc
    };


    myJSON = JSON.stringify(FormData);
    localStorage.setItem("formJSON", myJSON);
    text = localStorage.getItem("formJSON");
    obj = JSON.parse(text);

    addTask(task);
    addDescription(desc);
    console.log(FormData);
    return false;
};

newArray = [task, description];

var taskArray = [];
var descriptionArray = [];

var task = document.getElementById("task").value;
var description = document.getElementById("description").value;

function addTask(task) {
    taskArray.push(task);
    console.log(" " + taskArray.join(", "));
}

function addDescription(description) {
    descriptionArray.push(description);
    console.log(" " + descriptionArray.join(", "));
}
</script>

</body>

</html>