JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d1eqzjbvoh1rux.cloudfront.net/json2.min.js"></script>
Name: <input type="text" id="name" /><br/>
Start: <span id="start">0</span><br/>
End: <input type="text" id="end" /><br/>
Wage: <input type="text" id="wage" /><br/>
<button id="add">Add</button>

<br/>
<div id="jsonData"></div>

<br/>
<button id="submit">Submit</button>

JavaScript

var data = [];

$(document).ready(function() {
    $("#add").click(function(e) {
        e.preventDefault();
        data.push({"name" : $("#name").val(), "start": $("#start").text(), "end": $("#end").val(), "wage": $("#wage").val()});
        $("#start").text($("#end").val());
        $("#name").val("");
        $("#end").val("");
        $("#wage").val("");
        alert(data.length);
        alert(data[data.length-1].name);
        $("#jsonData").text(JSON.stringify(data));
    });
    
    $("#submit").click(function(e) {
        e.preventDefault();
        $.ajax({
            url: "/ajax_html_echo/",
            type: "POST",
            dataType: "json",
            data: {html: JSON.stringify(data)},
            success: function(data) { alert(JSON.stringify(data)); },
            error: function(x, t, m) { alert(t + " :: " + m); }
        });
    });
});