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 < max_fields) {            var box_html = $('<p class=text-box><label for=box' + n + '>Name <span class=box-number>' + n + '</span></label> <input type=text name=on' + (n - 1) + ' value= id=box' + n + ' /> <a href=# class=remove-box>Remove</a></p>');            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;    });});<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js></script><div class=my-form>    <p class=text-box>        <label for=box1>Name <span class=box-number>1</span></label>        <input type=text name=on0 value= id=box1 />        <a class=add-box href=#>Add More Names</a>    </p></div>
Limiting the number of text fields created
javascript;beginner;jquery;form;dom