JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<form id="cntnt01moduleform_2" method="post" action="http://www.kozigrod.pl/test" class="cms_form" enctype="multipart/form-data">
    <div class="hidden">
        <input type="hidden" name="mact" value="FormBuilder,cntnt01,default,0">
        <input type="hidden" name="hl" value="pl_PL">
        <input type="hidden" name="cntnt01returnid" value="187">
        <input type="hidden" name="cntnt01fbrp_callcount" value="1">
    <div>
        <input type="hidden" id="cntnt01form_id" name="cntnt01form_id" value="28">
        <input type="hidden" id="cntnt01fbrp_continue" name="cntnt01fbrp_continue" value="2">
        <input type="hidden" id="cntnt01fbrp_done" name="cntnt01fbrp_done" value="1">
    <div class="kalkulator">
        <div>
            <h2>Impreza szkoleniowa</h2>
        </div>
        <div class="required">
            <label for="calcPackage">Pakiet*</label>
            <select class="cms_dropdown" name="cntnt01fbrp__486" id="calcPackage">
                <option value="" selected="selected">---</option>
                <option value="1">Standard</option>
                <option value="2">Super</option>
                <option value="3">Lux</option>
            </select>
        </div>
        <div class="required">
            <label>Opcje*</label>
            <div>
                <input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__488[]" value="1" checked="checked" id="calcPackageOption_0">&nbsp;
                <label for="calcPackageOption_0">Serwis Kawowy (ciągły, podczas szkolenia)</label>
            <div>
                <input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__488[]" value="2" id="calcPackageOption_1">&nbsp;
                <label for="calcPackageOption_1">Lunch / Kolacja</label>
            <div>
                <input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__488[]" value="3" id="calcPackageOption_2">&nbsp;
                <label for="calcPackageOption_2">Nocleg</label>
        <div>
           ...

CSS

body {
    font-family: monospace
}

JavaScript

$(document).ready(function () {

    var choosedPackage = [];
    var choosedRentTime = [];
    var total = 0;
    var doubleRooms= 0;
    var singleRooms= 0;
    var peopleAmount=0;
    var packageOption1=0;
    var packageOption2=0;
    var packageOption3=0;



    $('#calcPackage').bind('change', function (e) {
        if ($('#calcPackage').val() == '1') {
            choosedPackage = [19, 52, 130, 204];

            $('#calcPackageOption_1').bind('change', function () {
                packageOption1 = this.checked ? this.value : 0;
            }).trigger('change');
            $('#calcPackageOption_2').bind('change', function () {
                packageOption2 = this.checked ? this.value : 0;
            }).trigger('change');
            $('#calcPackageOption_3').bind('change', function () {
                packageOption3 = this.checked ? this.value : 0;
            }).trigger('change');

            $('#calcDoubleRooms').bind('change', function (e) {
                doubleRooms = $('#calcDoubleRooms').val();
            }).trigger('change');
            $('#calcSingleRooms').bind('change', function (e) {
                singleRooms = $('#calcSingleRooms').val();
            }).trigger('change');
            $('#calcPeopleAmount').bind('change', function (e) {
                peopleAmount = $('#calcPeopleAmount').val()+8;
                changeTotal();
            }).trigger('change');




        } else if ($('#calcPackage').val() == '2') {
            choosedPackage = [33, 72, 130, 204];
        } else if ($('#calcPackage').val() == '3') {
            choosedPackage = [45, 92, 130, 204];
        }


        $('#calcSummary').text(total + ".00 PLN/doba");

    }).trigger('change');



    $('#calcRentTime').bind('change', function (e) {
        if ($('#calcRentTime').val() == '0') {
            choosedRentTime = [220, 330, 70, 150];
        } else if ($('#calcRentTime').val() == '1') {
            choosedRentTime = [440, 550, 70, 150];
        } else if...