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="#ofadults"># Adults</label>
        <input type="text" name="#ofadults" 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>
    <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="#ofadults"># Adults</label>
        <input type="text" name="#ofadults" 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...

JavaScript

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


function foo(e) {

    if ($(this).is(':last-child') && $(this).parent().children('input').length <= 9) {

        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));
    }
}

function removeEmpty(obj) {
    obj.parent().siblings('fieldset').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;

            })
        }
    })

}