JSFiddle - React, Tailwind, and code Playground

by Tarafder Ashek E Elahi

HTML

<div id="1" class="pizzaForm">
  <fieldset>
    <form class="pure-form">
      <legend>Pizza</legend>
      <label><b>Pizza Type: &nbsp;</b></label>
      <select id="pizza">
        <option>Please Select:</option>
        </option>
        <option name="margarita">Margarita</option>
        <option name="deep-pan">Deep Pan</option>
        <option name="stuffed-crust">Stuffed Crust</option>
      </select>
      <span style="float:right">
                <label><b>Pizza Size: &nbsp;</b></label>
                <select id="pizzaSize">
                    <option data-price="0">Please Select:</option></option>
                    <option name="e-small" data-price="4.99">Extra Small - £4.99</option>
                    <option name="small" data-price="5.99">Small - £5.99</option>
                    <option name="medium" data-price="6.99">Medium - £6.99</option>
                    <option name="large" data-price="8.99">Large - £8.99</option>
                    <option name="e-large" data-price="9.99">Extra Large - £9.99</option>
                    <option name="f-size" data-price="10.99">Family Size - £10.99</option>
                </select>
                </span>
    </form>
  </fieldset>
  <fieldset style="border-top:0px">
    <form class="pure-form">
      <legend><b>Toppings (99p Each): &nbsp;</b></legend>
      <input type="checkbox" name="onions">Onions</input>
      <input type="checkbox" name="mushrooms">Mushrooms</input>
      <input type="checkbox" name="peppers">Peppers</input>
      <input type="checkbox" name="olives">Olives</input>
      <input type="checkbox" name="garlic"> Garlic</input>
      <input type="checkbox" name="peperoni">Peperoni</input>
      <input type="checkbox" name="cheese">Pesto</input>
    </form>
  </fieldset>
  <h2 style="float:left; margin-top:-3cm; margin-left: 8cm; border: solid black 2px; padding: 5px; width:2cm; text-align:center"> £0.00 </h2>
  <button class="removePizza" style="float:left; margin-top:-1.5cm;...

JavaScript

var pizzaArray = new Array();

function pizza(number, pizzaCost, toppingCost) {
  this.pizzaNumber = number;
  this.pizzaCost = pizzaCost;
  this.toppingCost = toppingCost;
}

var pizzaCounter = 1;

pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00));

$("#pizza").change(function() {
  $("#pizzaSize").prop('disabled', false);
})

$(document).on("change", "#pizzaSize", function() {
  var formID = $(this).closest('div').attr("id");
  for (var i = 0; i < pizzaArray.length; i++) {
    if (pizzaArray[i].pizzaNumber == formID) {
      var selectionPrice = $('option:selected', this).attr('data-price');
      var selectionInt = parseFloat(selectionPrice, 10);
      pizzaArray[i].pizzaCost = selectionInt;
      calculateCost();
    }
  }
});

$(document).on("change", "input[type='checkbox']", function() {
  var checked = $(this).parent().find(":checkbox:checked").length;
  var toppingCost = (0.99 * checked);
  var formID = $(this).closest('div').attr("id");
  for (var i = 0; i < pizzaArray.length; i++) {
    if (pizzaArray[i].pizzaNumber == formID) {
      pizzaArray[i].toppingCost = toppingCost;
      calculateCost();
    }
  }
});

$("#addPizza").click(function() {
  pizzaCounter++;
  pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00));
  $(".pizzaForm:first").clone(true).prop("id", pizzaCounter).appendTo("#extraPizza");
  $("#" + pizzaCounter).find("input[type='checkbox']").removeAttr('checked');
  $("#" + pizzaCounter).find("h2").removeAttr('checked').html("£0.00");
});

$(".removePizza").click(function() {
  var numOfForms = $(".pizzaForm").length;

  if (numOfForms > 1) {
    $(this).closest('.pizzaForm').remove();
  } else {
    alert("Cannot delete this form!");
  }
});