JSFiddle - React, Tailwind, and code Playground

by Cristian González

HTML

<input type="button" class="add_service" id="service1" value="Add service 1">
<input type="button" class="add_service" id="service2" value="Add service 2">
<input type="button" class="add_service" id="service3" value="Add service 3">
<input type="button" class="add_service" id="service4" value="Add service 2">
<div id="generated">Total Price = £0</div>

JavaScript

var prices = [];
prices["service1"] = 60;
prices["service2"] = 80;
prices["service3"] = 100;
prices["service4"] = 120;

var generated = 0;

$(".add_service").click(function () {
  var desired_service = $(this).attr("id");
  generated += prices[desired_service];
  $("#generated").html("Total Price = £" + generated);
});