Adding more fields in form dynamically in Jquery [duplicate]

Using the example you passed in the question, just add this to your .append() :

.append('<div><input type="text" name="Texto'
 +(+wrapper.find("input:text").length+1)
 '" /><a href="#" class="remove_field">Remove</a></div>');

In case it will get the amount of inputs inside div that is in var wrapper and will add 1 more, since you already have an input inside div . As you can see in this example:

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    var length = wrapper.find("input:text").length;

    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" name="Texto' + (length+1) + '" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
    //Fazendo com que cada uma escreva seu name
    wrapper.find("input:text").each(function() {
      $(this).val($(this).attr('name'))
    });
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div>
    <input type="text" name="mytext[]">
  </div>
</div>

So there's a detail, it's not a problem, it's up to you. In this case you delete the input of number 5. The others will continue with their names. So if you want to always have the same order, you can do it as follows:

I created a function replaceName() :

function replaceName(){
    wrapper.find("input:text").each(function(){
        $(this).attr('name', "Texto"+(+$(this).index("input:text")+1));                                 $(this).val($(this).attr('name'))
    });
}

Just put it to run by clicking Add and Removing:

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();

    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
    //Fazendo com que cada uma escreva seu name
    replaceName();
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
    replaceName();
  })

  function replaceName() {
    wrapper.find("input:text").each(function() {
      $(this).attr('name', "Texto" + (+$(this).index("input:text") + 1));
      $(this).val($(this).attr('name'))
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div>
    <input type="text" name="mytext[]">
  </div>
</div>

UpDate:

The dynamically created inputs gave a class="textAdded" , and now var length does not count all the inputs, but only those with the class textAdded .

var length = wrapper.find("input:text").length;

$(wrapper).append('<div><input type="text" class="textAdded" name="Texto' + (length+1) + '" /><a href="#" class="remove_field">Remove</a></div>');

See here: link

Why do not you use X to include a numeral to a name:

var nome = 'Texto'+$x
$(wrapper).append('<div><input type="text" name="$nome"/><a href="#" class="remove_field">Remove</a></div>');