<script>
    // Function to load BMI data via AJAX
    function loadBMIData() {
        $.ajax({
            url: "{{ url_for('bmi.get_bmi_data') }}",
            type: "POST",
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({}),
            error: function(xhr, status, error) {
                console.error("Error loading BMI data:", error);
                alert("Error loading BMI data. Please try again.");
            },
            success: function(response) {
                if (response.error) {
                    console.error("Server error:", response.error);
                    alert("Error: " + response.error);
                    return;
                }

                const tableBody = $('#bmiTable tbody');
                tableBody.empty();

                if (response.data.length === 0) {
                    tableBody.append('<tr><td colspan="5" class="text-center">No BMI data available</td></tr>');
                    return;
                }

                response.data.forEach(function(item) {
                    const row = $('<tr>');
                    row.append($('<td>').text(item.datetime));
                    const heightInM = (parseFloat(item.height) / 10).toFixed(1) + ' m';
                    row.append($('<td>').text(heightInM));
                    row.append($('<td>').text(parseFloat(item.weight).toFixed(1)));
                    row.append($('<td>').text(parseFloat(item.bmi).toFixed(1)));
                    row.append(
                        $('<td>').append(
                            $('<button>')
                                .text('Remove')
                                .addClass('btn btn-sm btn-outline-danger remove-btn')
                                .attr('data-id', item.id)  // Store the BMI log ID
                                .attr('type', 'button')
                    ));
                    tableBody.append(row);
                });

                // Attach click event handlers to the Remove buttons
                $('.remove-btn').click(function() {
                    const bmiId = $(this).attr('data-id');
                    const tableRow = $(this).closest('tr');
                    if (confirm('Are you sure you want to remove this BMI record?')) {
                        removeBMIRecord(bmiId, tableRow);
                    }
                });
            }
        });
    }

    // Function to remove a BMI record via AJAX
    function removeBMIRecord(bmiId, tableRow) {
        $.ajax({
            url: "{{ url_for('bmi.remove_bmi_data') }}",
            type: "POST",
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({ id: bmiId }),
            error: function(xhr, status, error) {
                console.error("Error removing BMI data:", error);
                alert("Error removing BMI data. Please try again.");
            },
            success: function(response) {
                if (response.error) {
                    console.error("Server error:", response.error);
                    alert("Error: " + response.error);
                    return;
                }

                if (response.success) {
                    // Remove the row from the table
                    tableRow.remove();

                    // Check if the table is empty and show a message
                    if ($('#bmiTable tbody tr').length === 0) {
                        $('#bmiTable tbody').append('<tr><td colspan="5" class="text-center">No BMI data available</td></tr>');
                    }

                    alert("BMI record removed successfully.");
                }
            }
        });
    }

    // Load BMI data when the document is ready
    $(document).ready(function() {
        loadBMIData();
    });
</script>

Can you help to explain the code and referencing with the code snippets