<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>



      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 id="template" type="text/template">
    <p class="text-box">
       <label for="box{n}">Name <span class="box-number">{n}</span></label> <input type="text" name="on{-1}" value="" id="box{n}" /> <a href="#" class="remove-box">Remove</a>
    </p>
</script>

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

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

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

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