JSFiddle - React, Tailwind, and code Playground

by Udit Bhardwaj

HTML

<form id="form1" action="">
    <div>
        <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="#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>
        <br/>
        <p>
            <input id="Cancel" type="reset" value="Cancel" />
            <input id="Submit" type="submit" name="submit1" value="Submit the Form" />
        </p>
    </div>
</form>

JavaScript

var clone = $('#form1 div').children(':not(legend)').clone(true, true);

$('#form1 div fieldset').on('focus', 'input', foo)

function foo() {
   
    if ($(this).parent().parent().is(':last-child') && $(this).parent().is(':last-of-type')) {

            var d = new Date()
            var text = 'Time:' + (d.getHours()) + ':' + (d.getMinutes())
            var t = $('<div><legend></legend></div>')
            t.children('legend').text(text);
            clone = $('#form1').children('div:last-child').children(' :not(legend)').clone(true, true)

            t.append(clone);

            t.find('input').each(function () {
                var type = $(this).attr('type')

                if (type == "text") $(this).val("");
            })
            $(this).parent().parent().parent().append(t);


        }
}