如何将对象列表添加到html中，然后将其保存到数组中？

Question

我的Java语言不好，我的目标是将对象添加到数组中。到目前为止，这是我所做的，在我的html中：

<div class="col s12 m6 l6 body-reset">
    <div class="col s1 m1 l1 box custom-editor">ID</div>
    <div class="col s5 m5 l5 box custom-editor">Allowance Name</div>
    <div class="col s5 m5 l5 box custom-editor">Schedule</div>
    <div class="col s1 m1 l1 custom-editor box"><i class="fas fa-plus allowance-create" onclick="addItem()"></i></div>

    <ul id="allowance-list"></ul>


    <div class="col s1 m1 l1 input-style-wrapper box">
        <input type="hidden" class="input-field input-style label-style" name="id" id="id" />   
    </div>
    <div class="col s5 m5 l5 input-style-wrapper box">
        <input type="text" class="input-field input-style" name="allowance_name" id="allowance_name"  />    
    </div>
    <div class="col s5 m5 l5 input-style-wrapper box">
        <input type="text" class="input-field input-style" name="schedule" id="schedule" value="{{ old('schedule') }}" />   
    </div>

</div>

这是我的Javascript：

function addItem(){
    console.log('Stand by...');
    var ul = document.getElementById("allowance-list");
    var id = document.getElementById("id");
    var allowance_name = document.getElementById("allowance_name");
    var schedule = document.getElementById("schedule");
    var li = document.createElement("li");
    li.setAttribute('id',id.value);
    li.appendChild(document.createTextNode(id.value));
    ul.appendChild(li);
    li.setAttribute('id',allowance_name.value);
    li.appendChild(document.createTextNode(allowance_name.value));
    ul.appendChild(li);
    li.setAttribute('id',schedule.value);
    li.appendChild(document.createTextNode(schedule.value));
    ul.appendChild(li);


}

如何收集这些数据，然后将其保存到如下所示的数组中：[{'id'=>1, 'allowance_name' => 'Input allowance', 'schedule' => 'Some schedule'},{'id'=>2, 'allowance_name' => 'Input allowance 2', 'schedule' => 'Some schedule 2'}]，以便我可以使用它。

对于输出，我怎样才能完美地将数据对齐到其标题？因为这是我到目前为止所做的结果：