Как добавить галочки в список с помощью javascript

у меня проблемы с добавлением флажков в мой список по мере его создания. я хочу иметь возможность отмечать или снимать отметки с элементов, добавленных с помощью функции addToList.

Я пробовал играть с html и создавать функцию в javascript, но все равно безуспешно.

function addToList(){
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;

  let li = document.createElement("li");
  li.textContent = food + ' ' + amount + ' ' + unit + '.';
  document.getElementById("foodlist").appendChild(li);
};


function addToPantry () {
  for (i = 0; i<foodlist.length; i++){
    let name = foodlist[0];
    pantry.push(`${name}: [${amount}, [${unit}]]`)
  }


````
HTML
````

<input type = "text" name = "" value = "food" id = "food">
  <br><br>

<input type = "text" name = "" value = "amount" id = "amount">
  <br><br>

<select id = "unit">
  <option value = "oz">ounces</option>
  <option value = "lb">pounds</option>
  <option value = "servings">servings</option>
</select>
  <br><br>

<button  onclick  = "addToList(), addToPantry()" type = "button" name = "button" id = "addButton">add</button>

<ul id = "foodlist"></ul>