JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" placeholder="Name" id="name"> <input type="text" placeholder="Number" id="number">
        <br>
        <button id="makeObject">Make Object</button>
        <button id="show">Show Me The Objects</button>
            <ul id="list"></ul>

JavaScript

/*Sample ideal object
     1 = {
        name: John Doe
        number: 52
        newNumber: null
     }
    */

    var arrayOfObjects = [];
    var id = 1;

    $(document).ready(function(){

        $('#makeObject').on('click', function(){
            var number = (parseInt($('#Number').val()));
            var name = $('#Name').val();
            arrayOfObjects[id] = {
                number: number, 
                name: name,
                newNumber: null
            };
            id++;
            alert("The id is now: " + id);
            $('#Number').val("");
            $('#Name').val("");
        });

        $('#show').on('click', function(){
            $('#list').html("");
            for (i = 0; i < arrayOfObjects.length; i++) {
              $('#list').append("<li>" + arrayOfObjects[i] + "</li>");  
            };
        });
    });