Jquery - Repeatable form fields - Adding doesn't work
<p>I'm fairly new to JQuery and I'm trying to add multiple form fields with the click of a button. Although i am able to remove existing fields, i am not able to add new.</p>

<p>Testing: <a href="http://jsfiddle.net/Z4kYf/" rel="nofollow">http://jsfiddle.net/Z4kYf/</a></p>

<p>My HTML code is:</p>

<pre><code>&lt;div class="repeatable-wrap"&gt;
    &lt;ul id="tracks-repeatable" class="repeatable-fields-list"&gt;
        &lt;li&gt;
            &lt;input type="text" name="fr_options1" value="" size="200" /&gt;
            &lt;a class="repeatable-field-remove button" href="#"&gt;REMOVE&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;a class="repeatable-field-add button" href="#"&gt;ADD&lt;/a&gt;
</code></pre>

<p>And the Jquery:</p>

<pre><code>jQuery(function(jQuery) {
    jQuery('.repeatable-field-add').click(function() {
        var theField = jQuery(this).closest('div.repeatable-wrap').find('.repeatable-fields-list li:last').clone(true);
        var theLocation = jQuery(this).closest('div.repeatable-wrap').find('.repeatable-fields-list li:last');
        jQuery('input', theField).val('').attr('name', function(index, name) {
            return name.replace(/(\d+)/, function(fullMatch, n) {
                return Number(n) + 1;
            });
        });
        theField.insertAfter(theLocation, jQuery(this).closest('div.repeatable-wrap'));
        var fieldsCount = jQuery('.repeatable-field-remove').length;
        if (fieldsCount &gt; 1) {
            jQuery('.repeatable-field-remove').css('display', 'inline');
        }
        return false;
    });

    jQuery('.repeatable-field-remove').click(function() {
        jQuery(this).parent().remove();
        var fieldsCount = jQuery('.repeatable-field-remove').length;
        if (fieldsCount == 1) {
            jQuery('.repeatable-field-remove').css('display', 'none');
        }
        return false;
    });
});​
</code></pre>

<p>​</p>
