JSFiddle - React, Tailwind, and code Playground

by Udit Bhardwaj

HTML

<form id="form1">
    <legend>Time:11:30</legend>
    <fieldset id="fullname">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" size="20" maxlength="50" />
    </fieldset>
    <fieldset id="NumberofAdults">
        <label for="Adults"># Adults</label>
        <input type="text" name="adults" id="Adults" size="5" maxlength="2" />
    </fieldset>
    <fieldset id="Numberofkids">
        <label for="kids"># Kids</label>
        <input type="text" name="kids" id="kids" size="5" maxlength="2" />
    </fieldset>
    <fieldset id="infants">
        <label for="numberofinfants">Infants</label>
        <input type="text" name="numberofinfants" id="numberofinfants" size="5" maxlength="2" />
    </fieldset>
    <fieldset id="tablenumber">
        <label for="table">Table #</label>
        <input type="text" name="table" id="table" size="5" maxlength="2" />
    </fieldset>
    <fieldset id="Checknumber">
        <label for="check">Check #</label>
        <input type="text" name="check" id="check" size="5" maxlength="5" />
    </fieldset>
    <fieldset id="M">
        <label for="Misc">Misc.</label>
        <input type="text" name="Misc" id="Misc" size="75" maxlength="100" />
    </fieldset>
    <fieldset id="Total">
        <label for="adulttotal">Total Adults</label>
        <input type="text" id="adulttotal" value="0" name="adulttotal" readonly/>
        <br/>
        <label for="kidstotal">Total Kids</label>
        <input type="text" id="kidstotal" value="0" name="kidstotal" readonly/>
        <br/>
        <label for="infanttotal">Total Infants</label>
        <input type="text" id="infanttotal" value="0" name="infantstotal" readonly />
    </fieldset>
    <legend>Time:12:00</legend>
    <fieldset id="fullname">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" size="20" maxlength="50" />
    </fieldset>
    <fieldset id="NumberofAdults">
        <label for="Adults"># Adults</label>
       ...

JavaScript

$('form fieldset').not('#Total').delegate('input', 'focus', foo)


function foo(e) {

    if ($(this).is(':last-child')) {

        e.stopPropagation();



        $('<br/>').insertAfter($(this))
        var cloneLabel = $(this).prev().clone();
        var cloneInput = $(this).clone().val("");

        cloneLabel.insertAfter($(this).next())
        cloneInput.insertAfter($(this).next().next())

        removeEmpty($(this));

        total($(this).parent().nextAll('#Total:first'));
    }

}

function removeEmpty(obj) {
    obj.parent().siblings('fieldset').not('#Total').each(function () {
        if ($(this).children('input').length > 1) {

            var count = 1;
            var removeFirst = 0;
            $(this).children('input').each(function () {

                if ($(this).val().length > 0 && removeFirst == 0) {
                    if ($(this).parent().children('input:first').val().length == 0) {
                        $(this).parent().children('input:first').prev().remove();
                        $(this).parent().children('input:first').next().remove()
                        $(this).parent().children('input:first').remove();
                        removeFirst = 1;
                    }
                }

                if ($(this).val().length == 0 && count != 1) {


                    $(this).prev().prev().remove()
                    $(this).prev().remove()
                    $(this).remove();

                }

                count = 2;

            })
        }
    })

}

function total(obj) {

    var totalAdults = 0,
        totalKids = 0,
        totalInfants = 0;

    obj.prevAll('#NumberofAdults:first').children('input').each(function () {
        if (!isNaN(parseInt($(this).val(), 10))) totalAdults += parseInt($(this).val(), 10)

    });

    obj.prevAll('#Numberofkids:first').children('input').each(function () {
        if (!isNaN(parseInt($(this).val(), 10))) totalKids += parseInt($(this).val(), 10)
    })

   ...