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.