Edit table issue

Expected behavior Loading data into table from JSON at site startup and normal operation

Actual behavior Loading data into the table when the site starts, but action icons don't appear, and when you click on the "Add" button - all loaded fields disappear, but action buttons appear![

      document.addEventListener("DOMContentLoaded", function () {
        function insertDataToTable(tableId, data) {
            const table = document.querySelector(`#${tableId} tbody`);
            if (!table) {
                console.error(`Table with id ${tableId} not found!`);
                return;
            }
            for (const key in data) {
                const row = document.createElement("tr");

                const commCell = document.createElement("td");
                commCell.textContent = data[key].communication[0];
                row.appendChild(commCell);

                const seqCell = document.createElement("td");
                seqCell.textContent = data[key].sequence[0];
                row.appendChild(seqCell);

                const excCell = document.createElement("td");
                excCell.textContent = data[key].exception[0];
                row.appendChild(excCell);

                table.appendChild(row);
            }
        }

        fetch('data.json') 
            .then(response => {
                if (!response.ok) {
                    throw new Error("HTTP Error: " + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log(data)
                const jsonData = data
                for (const tableId in jsonData.data) {
                    insertDataToTable(tableId, jsonData.data[tableId]);
                }

            })
            .catch(error => {
                console.error(error);
            });
    });

Resources (screenshots, code snippets etc.)