my lastSavedData is getting overwrite whenever i chang uiData, what is the issue?async function fetchData(url) {
    try {
        const res = await fetch(url);
        const json = await res.json();
        return json
    } catch (e) {
        console.log(e)
        return []
    }
}

function createCell(data) {
    const cell = document.createElement('td');
    cell.textContent = data;
    return cell
}

function createRow(rowData, index) {
    const row = document.createElement('tr');

    const selectBox = createCell('✓');
    selectBox.classList.add('select-box');
    selectBox.dataset.id = rowData['id']
    row.appendChild(selectBox);

    row.dataset.rowId = rowData['id']
    const rowNumber = createCell(index + 1);
    rowNumber.dataset.rowIndex = index + 1
    row.appendChild(rowNumber)

    for (const key in rowData) {
        if (key === 'id') {
            continue
        }

        const cell = createCell(rowData[key])
        cell.dataset.property = key

        if (editableFields.includes(key)) {
            cell.contentEditable = "true"
        }

        row.appendChild(cell);
    }

    return row
}

function createTableBody(arr) {
    const fragment = document.createDocumentFragment();

    const tbody = document.createElement('tbody');
    fragment.appendChild(tbody)

    arr.forEach((el, i) => {
        const row = createRow(el, i)
        tbody.appendChild(row);
    });
    return fragment
}

function addNewEntry() {
    const item = {
        "id": new Date().getTime(),
        "chemical_name": "",
        "vendor": "",
        "density": "",
        "viscosity": "",
        "packaging": "",
        "pack_size": "",
        "unit": "",
        "quantity": 0
    }

    const tbody = table.lastElementChild;
    const row = createRow(item, tbody.children.length)
    tbody.appendChild(row)
}

function selectRow(el) {
    const cell = el

    if (!cell.classList.contains('select-box')) {
        return
    }

    const row = cell.parentElement

    if (row.classList.contains('active')) {
        row.classList.remove('active')
        selectedRow = null
        selectedRowId = null
    } else {
        const rows = table.lastElementChild.children
        for (let i = 0; i < rows.length; i++) {
            rows[i].classList.remove('active')
        }
        row.classList.add('active')
        selectedRowId = parseInt(cell.dataset.id)
        selectedRow = row
    }
}

function deleteRow() {
    selectedRow?.remove();
    selectedRow = null

    // const itemIndex = uiData.findIndex(el => el.id === selectedRowId)
    // uiData.splice(itemIndex, 1)

    selectedRowId = null;
}

function moveRowUp(item = selectedRow) {
    if (selectedRowId === null) {
        return
    }
    const previousItem = item.previousElementSibling;

    if (previousItem) {
        item.parentNode.insertBefore(item, previousItem);
        swapRowIndex(previousItem, item)
    }
}

function moveRowDown(item = selectedRow) {
    if (selectedRowId === null) {
        return
    }

    const nextItem = item.nextElementSibling;

    if (nextItem) {
        item.parentNode.insertBefore(nextItem, item);
        swapRowIndex(nextItem, item)
    }
}

function swapRowIndex(row1, row2) {
    const index1 = row1.children[1].textContent
    const index2 = row2.children[1].textContent

    row1.children[1].textContent = index2
    row2.children[1].textContent = index1
}

function updateUIData(selectedId, property, value) {
    uiData.forEach((el,i) => {
        if(el.id === selectedId){
            uiData[i][property] = value
            console.log(uiData[i][property])
            console.log(lastSavedData[i][property])
            // console.log(uiData === lastSavedData);
        }
    })
    
}

function saveData() {
    console.log('saving');
    
}

function refreshData() {
    console.log('refreshing');    
}

function refreshUI() {
    const html = createTableBody(lastSavedData)
    table.lastElementChild.remove()
    table.append(html)
}

const apiData = [];
let lastSavedData = [];
let uiData = [];
let selectedRow = null
let selectedRowId = null;
const editableFields = ["density", "viscosity", "quantity"];

fetchData('./data.json')
    .then(res => {
        apiData.push(...res);

        uiData = [...res];
        lastSavedData = [...res];
        
        const html = createTableBody(uiData)
        table.append(html)

    })

const table = document.querySelector('#table')
const actionCtaWrap = document.querySelector('.actions')

table.addEventListener('click', function (e) {
    selectRow(e.target)

    const cell = e.target;
    if (!editableFields.includes(cell.dataset.property)) {
        return
    }
    cell.onblur = function () {
        updateUIData(parseInt(cell.parentElement.dataset.rowId), cell.dataset.property, cell.textContent.trim())
    }
})

actionCtaWrap.addEventListener('click', function (e) {
    const action = e.target.dataset.action

    if (action === 'delete') {
        deleteRow()
    }

    if (action === 'create') {
        addNewEntry()
    }

    if (action === 'moveup') {
        moveRowUp()
    }

    if (action === 'movedown') {
        moveRowDown()
    }

    if (action === 'refresh') {
        refreshData()
        refreshUI()
    }

    if (action === 'save') {
        saveData()
    }
})