как добавить/добавить кнопку и номер строки (1,2,…,x) в ячейку строки после отправки кнопки

#javascript #html

Вопрос:

Я пытаюсь добавить кнопку в определенную ячейку таблицы, а также номер строки в той же таблице, но в другой ячейке. Мне нужно добавлять одну новую кнопку после каждой отправки кнопки, а также увеличивать номер строки после добавления новой строки после отправки кнопки.

Мне нужно вставить номера строк в столбец ID=»Порядковый номер» и кнопку в столбец id=»recordUpdateList».

спасибо за помощь

HTML

 lt;/headgt; lt;bodygt;  lt;h1gt;Manažment inventáralt;/h1gt;  lt;h2gt;Pridať nový inventár:  lt;/h2gt;  lt;form id="inventoryInputForm" action="addInventory" method="post" name="inputForm"gt;  lt;label for="InventoryLocationLabel"gt;Lokácia:lt;/labelgt;  lt;input type="text" name="inventoryLocationInput" id="inventoryLocation" autocomplete="off"gt;  lt;label for="inventoryNameLabel"gt;Názov inventára:lt;/labelgt;  lt;input type="text" name="inventoryNameInput" id="inventoryName" autocomplete="off"gt;  lt;label for="invnetoryIDLabel"gt;ID Inventára:lt;/labelgt;  lt;input type="text" name="inventoryIDInput" id="inventoryID" autocomplete="off"gt;  lt;input type="button" id="submitButton" value="Uložiť inventár" onclick="addField();"gt;  lt;/formgt;  lt;h2gt;Inventárny zoznam:lt;/h2gt;  lt;table id="inventoryTableHead" class="css-serial"gt;  lt;trgt;  lt;th name="textTable" id="orderNumberTableHead" class="text-center"gt;Poradové číslolt;/thgt;  lt;th name="textTable" id="locationTableHead" class="text-center"gt;Lokácialt;/thgt;  lt;th name="textTable" id="inventoryNameTaleHead" class="text-center"gt;Názov inventáralt;/thgt;  lt;th name="textTable" id="inventoryIDTablehead" class="text-center"gt;ID inventáralt;/thgt;  lt;th name="textTable" id="recordUpdateTableHead" class="text-center"gt;Upraviť záznamlt;/thgt;  lt;th name="textTable" id="recordDeleteTableHead" class="text-center"gt;!!!Zmazať položku!!!lt;/thgt;  lt;/trgt;  lt;tbody id="tbody"gt;  lt;tr id="inventoryList"gt;  lt;div id="orderNumberList"gt;lt;/divgt;  lt;div id="locationList"gt;lt;/divgt;  lt;div id="inventoryNameList"gt;lt;/divgt;  lt;div id="inventoryIDList"gt;lt;/divgt;  lt;div id="recordUpdateList"gt;lt;/divgt;  lt;div id="recordDeleteList"gt;lt;/divgt;  lt;/trgt;  lt;/tbodygt;  lt;tfootgt;lt;/tfootgt;  lt;/tablegt;  

JS

 document.getElementById("submitButton").onclick = function (e) {  e.preventDefault();  const inventoryTable = document.getElementById("inventoryTableHead");  const row = inventoryTable.insertRow();  const orderNumber = row.insertCell();  const location = row.insertCell();  const name = row.insertCell();  const id = row.insertCell();  const btnUpdateRecord = row.insertCell();     orderNumber.innerHTML = document.getElementById("");  location.innerHTML = document.getElementById("inventoryLocation").value;  name.innerHTML = document.getElementById("inventoryName").value;  id.innerHTML = document.getElementById("inventoryID").value;   console.log("new row was added")  inventoryLocation.value = "";  inventoryName.value = "";  inventoryID.value = ""; }```