[jQuery] Dynamic Form - Best practice

[Kreeves]

There is plenty of discussion on "Dynamic form validation" in this
group, but my question is of a slightly different nature.

I'm attempting to create a page that will build the form based on user
input.  IE: User is prompted with one search box with several
options.  They can then hit an "Add search" and be allowed another
search box to further narrow down their search results. (The web-app
is a report utility).

I've looked around for websites that do this in an attempt to get an
idea of what might be the best way of pulling it off.  One website I
ran across did it like so...

<script type="text/javascript">
// only for demo purposes
$.validator.setDefaults({
        submitHandler: function() {
                alert("submitted!");
        }
});
$.validator.messages.max = jQuery.format("Your totals musn't exceed
{0}!");

$.validator.addMethod("quantity", function(value, element) {
        return !this.optional(element) && !this.optional($(element).parent
().prev().children("select")[0]);
}, "Please select both the item and its amount.");

$().ready(function() {
        $("#orderform").validate({
                errorPlacement: function(error, element) {
                        error.appendTo( element.parent().next() );
                },
                highlight: function(element, errorClass) {
                        $(element).addClass(errorClass).parent().prev().children
("select").addClass(errorClass);
                }
        });

        var template = jQuery.format($("#template").val());
        function addRow() {
                $(template(i++)).appendTo("#orderitems tbody");
        }

        var i = 1;
        // start with one row
        addRow();
        // add more rows on click
        $("#add").click(addRow);

        // check keyup on quantity inputs to update totals field
        $("#orderform").delegate("keyup", "input.quantity", function(event) {
                var totals = 0;
                $("#orderitems input.quantity").each(function() {
                        totals += +this.value;
                });
                $("#totals").attr("value", totals).valid();
        });

});
</script>

They then wrap the search fields in a textarea and label it a
"template".  Note the line ABOVE that reads "var template =
jQuery.format"

<textarea style="display:none" id="template">
        <tr>
                <td>
                        <label>{0}. Item</label>
                </td>
                <td class='type'>
                        <select name="item-type-{0}">
                                <option value="">Select...</option>
                                <option value="0">Learning jQuery</option>
                                <option value="1">jQuery Reference 
Guide</option>
                                <option value="2">jQuery Cookbook</option>
                                <option vlaue="3">jQuery In Action</option>
                                <option value="4">jQuery For Designers</option>
                        </select>
                </td>
                <td class='quantity'>
                        <input size='4' class="quantity" min="1" 
id="item-quantity-{0}"
name="item-quantity-{0}" />
                </td>
                <td class='quantity-error'></td>
        </tr>
</textarea>

The original page is at 
http://jquery.bassistance.de/validate/demo/dynamic-totals.html.

Is this best practice?  Is there a different way to do this?  It
really just seems like a hacked up way to do it.

Thanks.