JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<form id="calx-south-green">
                <fieldset id="adults">
                    <legend>Additional Adults - <span class="red">£228</span></legend>
                    <div>
                        <label for="1">1</label>
                        <input type="checkbox" id="1" value="228" />
                    </div>
                    <div>
                        <label for="2">2</label>
                        <input type="checkbox" id="2" value="228" />
                    </div>
                    <div>
                        <label for="3">3</label>
                        <input type="checkbox" id="3" value="228" />
                    </div>
                    <div>
                        <label for="4">4</label>
                        <input type="checkbox" id="4" value="228" />
                    </div>
                    <div>
                        <label for="5">5</label>
                        <input type="checkbox" id="5" value="228" />
                    </div>
                    <div>
                        <select name="proc" id="proc">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                    <input type="text" name="Adult Sub Total" id="adults_total" value="0" />
                </fieldset>

                <fieldset id="young">
                    <legend>Young Adults 16-21 - <span class="red">£146</span></legend>
                    <div>
                        <label for="1">1</label>
                        <input type="checkbox" id="1" value="146" />
                    </div>
                    <div>
                        <label for="2">2</label>
         ...

JavaScript

var total_adults = $("#adults_total");
    var checkBox_adults = $("#adults input[type='checkbox']");
    var _select_adults = $("#adults select");

    checkBox_adults.click(function(){
        checkBox_adults.prop("checked", false);
        var _index = $(this).attr("id");

        total_adults.val(_index * 228);

        _select_adults.val(_index);

        checkBox_adults.each(function(){
            if (_index > 0) {
                $(this).prop("checked", true);
                _index--;
            }
        });
        Total();
    });

    _select_adults.change(function() {

        checkBox_adults.prop("checked", false);

        var _val = $(this).val();

        total_adults.val(_val * 228);

        checkBox_adults.each(function() {
            if (_val > 0) {
                $(this).prop("checked", true);
                _val--;
            }
        });
Total();
    });




    var total_young = $("#young input[name='Young Sub Total']");
    var checkBox_young = $("#young input[type='checkbox']");
    var _select_young = $("#young select");

    checkBox_young.click(function(){
        checkBox_young.prop("checked", false);
        var _index = $(this).attr("id")
        total_young.val(_index * 146);
        _select_young.val(_index);
        checkBox_young.each(function(){
            if (_index > 0) {
                $(this).prop("checked", true);
                _index--;
            }
        });
         Total();
    });

    _select_young.change(function() {
        checkBox_young.prop("checked", false);
        var _val = $(this).val();
        total_young.val(_val * 146);
        checkBox_young.each(function() {
            if (_val > 0) {
                $(this).prop("checked", true);
                _val--;
            }
        });
        Total();
    });
    
        function Total(){
        var num1 = $("#adults_total").val();
            num2 = $("#young_total").val();
            num3 = 228;
        result = parseInt(num1, 10) +...