putting html into a var using JQuery

I'm trying to create a number of divs (rows) based on the number entered into a field. If I enter 3 into a textfield, 3 of the divs are created with nested divs in them.

For some reason, this doesn't work. I've narrowed the problem down to this part. I think it has something to do with the way the Html is fed into the var input.

See here

$(function() {

            var input = $('<div class="form_item" id="container_field">
                                    <div class="form_label"><label>&nbsp;</label></div>
 开发者_如何学C                                   <div class="fi">
                                        <div class="label">Container Number</div>
                                        <div class="field"><input type="text" class="n_input"/><input type="text" class="f_input"/></div>
                                    </div>
                                    <div class="fi">
                                        <div class="label">Size</div>
                                        <div class="field">
                                            <select class="n_select">
                                                <option>20 feet</option>
                                                <option>40 feet</option>
                                                <option>Others</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="fi">
                                        <div class="label">Weight</div>
                                        <div class="field"><input type="text" class="n_input"/></div>
                                    </div>
                                  </div>');
            var newFields = $('');

            $('#qty').bind('blur keyup change', function() {
                var n = this.value || 0;
                if (n+1) {
                    if (n > newFields.length) {
                        addFields(n);
                    } else {
                        removeFields(n);
                    }
                }
            });

            function addFields(n) {
                for (i = newFields.length; i < n; i++) {
                    var newInput = input.clone();
                    newFields = newFields.add(newInput);
                    newInput.appendTo('#container_specs');
                }
            }

            function removeFields(n) {
                var removeField = newFields.slice(n).remove();
                newFields = newFields.not(removeField);
            }
        });

Also can anyone please recommend a good browser based debugger? Something that would tell me why this didn't work in the first place.

If you are trying to replicate the input code, you are probably breaking it by having multiple elements with the same id. Change the container_field id into a class.