Help with custom form

I am creating a custom form.
When a user clicks on a checkbox, they should be able to enter in the number and quantity then submit.

When a user submits this, I want to be able to see the category + their input for the number and quantity.

I am having trouble making this possible, as you can see the picture below.

Also, when a user clicks on 2 checkboxes and input’s a number and quantity for category, the same number appears for the other category.

How can I make what I need possible?

Do I need to create a new collection for categories and link it to the other data collection?

I am new to coding, please help me with a solution.

https://petegregory95.wixsite.com/website-1


$w.onReady(function () {
    $w("#checkbox1").onClick( (event) => {
 if ($w("#checkbox1").checked===true) {
            $w('#group1').expand()
        }
 else
        {
            $w('#group1').collapse()
        }
 
} );

    $w("#checkbox2").onClick( (event) => {
 if ($w("#checkbox2").checked===true) {
            $w('#group2').expand()
        }
 else
        {
            $w('#group2').collapse()
        }
 
} );

    $w("#checkbox3").onClick( (event) => {
 if ($w("#checkbox3").checked===true) {
            $w('#group3').expand()
        }
 else
        {
            $w('#group3').collapse()
        }
 
} );

} );

import wixData from 'wix-data';

var food = $w('#text76').text
var fluid = $w('#text74').text
var element = $w('#text75').text

var item = {
'food': food,
'fluid': fluid,
'element': element

}

wixData.insert('Girl', item)