如何在Javascript中通过单击按钮向表中添加信息？

我有两个函数，一个动态创建一个列表，另一个在将行添加到表中后插入一行。 现在的情况是，当我单击“添加到订单”时，产品被添加到表中，新行被创建，当我单击另一个产品添加到表中时，旧产品消失，最新的产品取而代之，然后创建新行，因此现在我总共有3行，但表中只有1个产品，表中有两个空行。每次我向订单中添加一个产品时，它都会用新产品替换第一行，旧产品会被删除。我希望我单击的每个产品都被添加到表中，然后在表中创建一个新行

html:

---

您正在创建无效的标记。

元素不是

元素的有效子元素。请修复缩进（并删除与问题没有直接关系的任何内容，如不必要的空行），然后创建（）。当然，我可以这样做。你对我原来的问题有可能的解决办法吗？

     <table id = "productsTable">
                <tr>
                    <th>#</th>
                    <th>SKU</th>
                    <th>Product Name</th>
                    <th>Quantity</th>
                    <th>Retail Price</th>
                    <th>List Price</th>
                             
                </tr>
                <tr>
                    <td>1</td>
                    <td><input type="text" id="productSKU" readonly ="true"/></td>
                    <td><input type="text" id="productName" readonly = "true"/></td>
                    <td><input type="text" id="quantity" /></td>
                    <td><input type="text" id="retailPrice" readonly = "true"/></td>
                    <td><input type="text" id="listPrice" readonly = "true"/></td>
                    <input type="button" id = "btnDeleteRow" value="-">   
                </tr>
                
            </table>

    function populateProductList(jsonArr){                
    
    var html = "";

    html += `<ul id="myULProducts">`;
            
    for(var x = 0; x < jsonArr.length; x++){
                                
        html += `
        <li SKU = "${jsonArr[x].SKU}">
        <a href="#" class="products">                
            <strong>Product SKU:</strong> ${jsonArr[x].SKU} 
            <br><strong>Product Name:</strong> ${jsonArr[x].product_name} 
            <br><strong>Retail Price:</strong> ${jsonArr[x].retail_price}
            <br><strong>List Price:</strong> ${jsonArr[x].list_price}
                    <br><br></a>
                    <button type="button" class="btnAddProductToOrder">Add to Order</button>    
                </li>
        </div>`
    }
    html += `</ul>`;
    var ol = document.createElement("ol");
    ol.innerHTML = html;

    var tableContainer = document.getElementById("product-list-container");
    tableContainer.innerHTML = "";
    tableContainer.appendChild(ol);

    tableContainer.addEventListener("click", function(evt){
    //populateCardGroupList();
    var target = evt.target;
    //if statement to see if the classList has a button edit
        
        if(target.classList.contains("btnAddProductToOrder")){
            //get the id of the card group clicked
            var selectedId = target.closest("li").getAttribute("SKU");
            //get the card group attached to that id and pass it the rest of the json Array of objects
            var selectedProduct = getProductId(selectedId, jsonArr);
            populateOrderFormProducts(selectedProduct);
            
        }
        
    });
    
    
}



document.getElementById("btnGetProductList").addEventListener("click", ()=>{
    
    getAllProducts();

}); 


    function populateOrderFormProducts(jsonArr){
        document.querySelector("#productSKU").value = jsonArr.SKU;
        document.querySelector("#productName").value = jsonArr.product_name;
        document.querySelector("#quantity").value = 1;
        document.querySelector("#retailPrice").value = jsonArr.retail_price;
        document.querySelector("#listPrice").value = jsonArr.list_price;
        insertRow();
    
    

    }

    function insertRow() {
        var x = document.getElementById('productsTable');
        var new_row = x.rows[1].cloneNode(true);
        var len = x.rows.length;
        new_row.cells[0].innerHTML = len;
  
        var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
        inp1.id += len;
        inp1.value = '';
        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.id += len;
        inp2.value = '';
        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.id += len;
        inp3.value = '';
        var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
        inp4.id += len;
        inp4.value = '';
        var inp5 = new_row.cells[5].getElementsByTagName('input')[0];
        inp5.id += len;
        inp5.value = '';
        x.appendChild(new_row);
}

function populateOrderFormProducts(jsonArr){
    if(document.querySelector("#productSKU").value = null){
        document.querySelector("#productSKU").value = jsonArr.SKU;
        document.querySelector("#productName").value = jsonArr.product_name;
        document.querySelector("#quantity").value = 1;
        document.querySelector("#retailPrice").value = jsonArr.retail_price;
        document.querySelector("#listPrice").value = jsonArr.list_price;
        insertRow();
    
    }
    else if(document.querySelector("#productSKU").value != null){
        document.querySelector("#productSKU2").value = jsonArr.SKU;
        document.querySelector("#productName2").value = jsonArr.product_name;
        document.querySelector("#quantity2").value = 1;
        document.querySelector("#retailPrice2").value = jsonArr.retail_price;
        document.querySelector("#listPrice2").value = jsonArr.list_price;
        insertRow();
    }
    else if(document.querySelector("#productSKU2").value != null){
        document.querySelector("#productSKU3").value = jsonArr.SKU;
        document.querySelector("#productName3").value = jsonArr.product_name;
        document.querySelector("#quantity3").value = 1;
        document.querySelector("#retailPrice3").value = jsonArr.retail_price;
        document.querySelector("#listPrice3").value = jsonArr.list_price;
        insertRow();
    }

}