JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Dinner Plans assighment -->
      <p id="dinnerPlans"> Dinnner Plans Assighment: </p>
      
      <table>
        <thead>
          <tr>
            <th>Check if attending</th>
            <th>Name</th>
            <th>Slices</th>
            <th>Aceptable Toppings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" id="jane"></td>
            <td>Jane</td>
            <td>2</td>
            <td>mushroom, onion, peppers, olives</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="lisa"></td>
            <td>Lisa</td>
            <td>3</td>
            <td>pepperoni, ham, pineapple</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="taylor"></td>
            <td>Taylor</td>
            <td>3</td>
            <td>extra cheese, pepperoni, sausage, bacon</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="chris"></td>
            <td>Chris</td>
            <td>2</td>
            <td>mushroom, sausage, bacon, ham, onion, peppers</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="alyssa"></td>
            <td>Alyssa</td>
            <td>1</td>
            <td>pepperoni, bacon</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="will"></td>
            <td>Will</td>
            <td>2</td>
            <td>extra cheese, sausage, bacon, onion, peppers, olives</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="jessica"></td>
            <td>Jessica</td>
            <td>2</td>
            <td>pepperoni, bacon, ham, pineapple, onion, peppers</td>
          </tr>
        </tbody>
      </table>
      
      <button onclick="outputPizza()">Submit selected textboxes</button>
      
      <p id="dinnerPlansTwo"><br/></p>

JavaScript

//Dinner plans assignment

var nameSliceTop = [];
var totalSlice = 0;

nameSliceTop[0] = ["jane", 2, "mushroom", "onion", "peppers", "olives"];
nameSliceTop[1] = ["lisa", 3, "pepperoni", "ham", "pineapple"];
nameSliceTop[2] = ["taylor", 3, "extra cheese", "pepperoni", "sausage", "bacon"];
nameSliceTop[3] = ["chris", 2, "mushroom", "sausage", "bacon", "ham", "onion", "peppers"];
nameSliceTop[4] = ["alyssa", 1, "pepperoni", "bacon"];
nameSliceTop[5] = ["will", 2, "extra cheese", "sausage", "bacon", "onion", "peppers", "olives"];
nameSliceTop[6] = ["jessica", 2, "pepperoni", "bacon", "ham", "pineapple", "onion", "peppers"];

window.outputPizza = function outputPizza() {
  for (i = 0; i < 7; i++) {
    if (document.getElementById(nameSliceTop[i][0]).checked === true) {
      totalSlice += nameSliceTop[i][1];
    }  
  }  
  document.getElementById("dinnerPlansTwo").innerHTML += "You will need " + totalSlice + " slices for your guests." + "<br/>";
  totalSlice = 0;
  var preferences = [],
      currentAcceptableToppings = []

  for (i = 0; i < 7; i++) {
    if (document.getElementById(nameSliceTop[i][0]).checked === true) {
      preferences.push(nameSliceTop[i].slice(2)) // get array of preferences
    }
  }

  preferences.forEach(function(pref){
    pref.forEach(function(topping){
      if(currentAcceptableToppings.indexOf(topping) != -1) { return; }
      // check if topping is part of all preferences
      var filterPreferences = preferences.filter(function(pref){ return pref.indexOf(topping) != -1 });
      if(filterPreferences.length == preferences.length){
        currentAcceptableToppings.push(topping)
      }
    })
  })

  var message = "Your agreeable options include:";

  for (z = 0; z < currentAcceptableToppings.length; z++) {
    message += " " + currentAcceptableToppings[z] + " ";
  }

  document.getElementById("dinnerPlansTwo").innerHTML = message
}