Limiting the number of text fields created It's a script that I've ripped off elsewhere, and have modified it via help from Stack Overflow on a couple of other questions, so that it tops out at 10 fields.

My knowledge of JS/jQuery is barely there.  I'm terrified that I did it badly or wrongly. Could you please let me know if this is the correct way of doing it, or if there's another way that I should have done it differently?

I need to make sure that the max number of text fields created is limited to 10 at most.

Here's a demo and a JSFiddle.



jQuery(document).ready(function($) {
    var max_fields = 10; 
    var x = 1; 

    $('.my-form .add-box').click(function() {
        var n = $('.text-box').length + 1;

        if(x &lt; max_fields) {
            var box_html = $('&lt;p class="text-box"&gt;&lt;label for="box' + n + '"&gt;Name &lt;span class="box-number"&gt;' + n + '&lt;/span&gt;&lt;/label&gt; &lt;input type="text" name="on' + (n - 1) + '" value="" id="box' + n + '" /&gt; &lt;a href="#" class="remove-box"&gt;Remove&lt;/a&gt;&lt;/p&gt;');
            box_html.hide();
            $('.my-form p.text-box:last').after(box_html);
            box_html.fadeIn('slow');
            x++; 
        }
    });

    $('.my-form').on('click', '.remove-box', function() {
        $(this).parent().css('background-color', '#FF6C6C').fadeOut("slow", function() {
            $(this).remove();
            $('.text-box').each(function(index) {
                var label = $(this).children('label');
                label.attr('for', 'box' + (index + 1));
                label.children('.box-number').text(index + 1);
                $(this).children('input').attr({
                    name: 'on' + index,
                    id: 'box' + (index + 1)
                });
            });
        });
        return false;
    });
});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="my-form"&gt;
    &lt;p class="text-box"&gt;
        &lt;label for="box1"&gt;Name &lt;span class="box-number"&gt;1&lt;/span&gt;&lt;/label&gt;
        &lt;input type="text" name="on0" value="" id="box1" /&gt;
        &lt;a class="add-box" href="#"&gt;Add More Names&lt;/a&gt;
    &lt;/p&gt;
&lt;/div&gt;
Bored, so I made a few improvements as I mentioned (in the comments that have vanished when this was moved to Code Review):

Use the jQuery shortcut DOM-ready handler

A handy short-cut for your DOM ready, with locally scoped $ is just jQuery(function($){...});

Store templates in HTML, not JavaScript strings:

&lt;script id="template" type="text/template"&gt;
    &lt;p class="text-box"&gt;
       &lt;label for="box{n}"&gt;Name &lt;span class="box-number"&gt;{n}&lt;/span&gt;&lt;/label&gt; &lt;input type="text" name="on{-1}" value="" id="box{n}" /&gt; &lt;a href="#" class="remove-box"&gt;Remove&lt;/a&gt;
    &lt;/p&gt;
&lt;/script&gt;


and access like this:

var box_html = $('#template').html().replace(/{n}/g, n).replace(/{-1}/g, n-1);
var $box = $(box_html);


Count the current items when you need them

var n = $('.text-box').length + 1;
if (n &lt;= max_fields) {


Restrict to the current "group" of inputs:

var $form = $(this).closest('.my-form');
$('p.text-box:last', $form).after($box);


This also means it can now handle multiple sets of inputs, each with different name/id prefixes.

Combine operations when you can:

$box.hide().fadeIn('slow');


Putting it all together:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/q2emvzdd/4/

Notes:


A prefix was needs to be supplied by the parent form (e.g. a data attribute) so that each set of inputs has unique IDs and names. This is not applied to the first entry yet, but I have to go now, so something for you to finish :)