Untitled

<script>
    let data = @Data@;
    let scopeRadios;
    let categorySelect;
    let sourceSelect;
    let unitInput;
    let unitInput2;
    let carbonFactorInput;
    let resultInput;
    let commentInput;
    let charCount;

    $(document).ready(function () {
        scopeRadios = $('input[name="scope"]');
        categorySelect = $('#categories'); // Make sure this ID matches your HTML
        sourceSelect = $('#sources'); // Make sure this ID matches your HTML
        unitInput = $('#unit');
        unitInput2 = $('#unit2').hide(); // hide second input box by default
        carbonFactorInput = $('#carbonfactor');
        resultInput = $('#result');
        commentInput = $('#comment');
        charCount = $('#charCount');

        // Event bindings
        scopeRadios.change(onScopeChange);
        categorySelect.change(onCategoryChange);
        sourceSelect.change(onSourceChange);
        unitInput.add(unitInput2).on('input', onUnitInputChange);
        commentInput.on('keyup', onCommentKeyUp);
        $('#submit').click(onSubmitClick);
        $('#clear').click(onClearClick);
        
        // Initialize form state
        resetForm();
    });

    function resetForm() {
        // ... your existing resetForm logic ...
    }

    function onScopeChange() {
        let selectedScope = $(this).val();
        let categories = [...new Set(data.filter(item => item.scope === selectedScope).map(item => item.category))];

        // Clear the categories dropdown
        categorySelect.empty();
        categorySelect.append(new Option("Select category", "", true, true));

        // Populate the categories dropdown
        categories.forEach(category => {
            categorySelect.append(new Option(category, category));
        });
        
        // Enable the categories dropdown
        categorySelect.prop('disabled', false);
    }

    // ... the rest of your functions ...

    $(document).ready(function() {
         $("input[name='scope']").change(onScopeChange);
         $("input[name='scope']:checked").trigger('change');
    });
</script>