JSFiddle - React, Tailwind, and code Playground

by quangcanh2975

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

</head>

<body>
    <h1>CPSC 1045 Take Out Ordering</h1>
    Main <select id="select1">
        <option value="lamb">Lamb Vindaloo</option>
        <option value="butterchicken">Butter Chicken</option>
        <option value="prawnmasala">Prawn Masala</option>
    </select>
    <fieldset>
        <legend>Select Your Side Dishes</legend>
        <p>Side Dishes <select id="select2">
                <option value="papa">Papadums</option>
                <option value="samosas">Samosas</option>
                <option value="pakoras">Pakoras</option>
                <option value="kheer">Kheer</option>
            </select></p>
        <button onclick="addDish()">Add Side Dish</button> <button onlick="removeDish()">Remove Side
            Dish</button><br>
    </fieldset>
    <br>
    Current Side Dishes:<br>
    <ul id="dish1"></ul>

    <br>
    <p>Would you like Rice or Naan?
        <input type="checkbox" name="rice" value="food"> Rice
        <input type="checkbox" name="naan" value="food"> Naan</p>
    <button onlick="calCost()">Calculate Cost</button>
    <h3 id="total"></h3>
    <script src="main.js" type="text/javascript" defer></script>
</body>

</html>

JavaScript

var myArray = [];
function addDish() {
  var dish = document.getElementById("select2").value;
  console.log(dish);
  myArray.push(dish);

  console.log(myArray);

  document.getElementById("dish1").innerHTML += "<li>" + myArray[myArray.indexOf(dish)] + "</li>";
}