// Initialize data array from local storage

            let data = JSON.parse(localStorage.getItem('data')) || [];

​

            // Function to add data to local storage and table

            function addDatas(dataValue1, dataValue2, dataValue3, imageData) {

                data.push([dataValue1, dataValue2, dataValue3]);

                localStorage.setItem('data', JSON.stringify(data));

                appendDataToTable();

            }

​

            // Function to append data to the table

            function appendDataToTable() {

                const $tableBody = $('#mytable tbody');

                $tableBody.empty();

​

                data.forEach((dataValues, index) => {

                    const imageSource = dataValues[3] || ''; // Display image if available

                    $tableBody.append(`

                        <tr>

                            <td><input type="checkbox" class="form-check-input td-checkbox" id=""></td>

                            <td>${index + 1}</td>

                            <td>${dataValues[0]}</td>

                            <td>${dataValues[1]}</td>

                            <td>${dataValues[2]}</td>

                            <td><img src="${imageSource}" alt="Image" style="height:50px"></td>

                            <td>

                                <button class="edit btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">

                                    <i class="bi bi-pencil-square"></i>

                                </button>

                                <button class="delete btn btn-danger">

                                    <i class="bi bi-trash"></i>

                                </button>

                            </td>

                        </tr>

                    `);

                });

            }

​

            // Add initial data to the table

            appendDataToTable();

​

            // Add new data to local storage and table

            $('#addData').click(function () {

                const dataValue1 = $('#dataInput1').val().trim();

                const dataValue2 = $('#dataInput2').val().trim();

                const dataValue3 = $('#dataInput3').val().trim();

                const imageData = URL.createObjectURL($('#imageInput')[0].files[0]);

                if (dataValue1 && dataValue2 && dataValue3) {

                    addDatas(dataValue1, dataValue2, dataValue3, imageData);

                    $('#dataInput1, #dataInput2, #dataInput3, #imageInput').val('');

                }

            });

​

            $('#mytable').on('click', '.edit', function () {

                const $row = $(this).closest('tr');

                const dataValue1 = $row.find('td:eq(2)').text();

                const dataValue2 = $row.find('td:eq(3)').text();

                const dataValue3 = $row.find('td:eq(4)').text();

​

                $('#dataInput1').val(dataValue1);

                $('#dataInput2').val(dataValue2);

                $('#dataInput3').val(dataValue3);

​

                const dataIndex = data.findIndex(dataValues => dataValues[0] === dataValue1);

​

                // Update the data in local storage when the "Add" button is clicked

                $('#addData').off('click').on('click', function () {

                    const newData1 = $('#dataInput1').val().trim();

                    const newData2 = $('#dataInput2').val().trim();

                    const newData3 = $('#dataInput3').val().trim();

                    const newImage = URL.createObjectURL($('#imageInput')[0].files[0]);

                    if (newData1 && newData2 && newData3 && newImage) {

                        data[dataIndex] = [newData1, newData2, newData3, newImage];

                        localStorage.setItem('data', JSON.stringify(data));

                        appendDataToTable();

                        $('#dataInput1, #dataInput2, #dataInput3, #imageInput').val('');

                    }

                });

            });

​

​

            // Delete data from local storage and the table

            $('#mytable').on('click', '.delete', function () {

                const $row = $(this).closest('tr');

                const dataValue1 = $row.find('td:eq(0)').text();

                const dataIndex = data.findIndex(dataValues => dataValues[0] === dataValue1);

                if (dataIndex !== -1) {

                    data.splice(dataIndex, 1);

                    localStorage.setItem('data', JSON.stringify(data));

                    appendDataToTable();

                }

            });

​