I am making a WooCommerce/Wordpress Website for someone wanting to start a meal prep service. She wants it to be similar to a create your own pizza script, except it will be used to customize meals. There will be checkboxes that display ingredients, and if the boxes are checked, I need to submit them so that the website owner knows what meals to make.

Example:

Email Form

Meats: Checkbox1 : Steak

Checkbox2 : Chicken

Checkbox3 : Pork

This is an example of what I have so far:

<div>
   <input type="checkbox" name="foodType" data-name="Chicken Thighs"> 
   <label>Chicken Thighs</label>
   <input type="checkbox" name="foodType" data-name="Chicken Breast"> 
   <label>Chicken Breast</label>
   <input type="checkbox" name="foodType" data-name="Chicken Leg"><label>Chicken Leg</label>
   
   </div>

   <div id='results'>
   </div>

var finalOrder = [];

document.querySelectorAll('input[name=foodType]').forEach(elem => {
elem.addEventListener('change', updateList);
});

function updateList ()
{
finalOrder = []; // Reset this array so that we can populate it with 
the new checkbox answers.

document.querySelectorAll('input[name=foodType]').forEach(v => {
if (v.checked) {
finalOrder.push(v.dataset.name);
}
});

document.querySelector('#results').innerHTML = buildList();
}


function buildList ()
{
let list = '<ul>';

finalOrder.forEach(str => {
list += "<li>" + str + '</li>';
});

list += '</ul>';

return list;
}

I am very new to Javascript so I had a little help, but I need to make sure that she gets the checkbox data. Am I going about this correctly? I was going to append the checkbox data to an array and send the array to her somehow. How would you recommend going about doing that?