javascript - Dynamically Add Form Fields and Update Field Value -

i have form can add fields: http://jsfiddle.net/ytrkqr6a/2/

    $(document).ready(function() {     var max_fields      = 32; //maximum input boxes allowed     var wrapper         = $(".cameras"); //fields wrapper     var add_button      = $(".add-camera"); //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 class="form-group"><input type="text" name="camera '+ x +'" value="camera '+ x +'" placeholder="camera '+ x +'" class="form-control cameras" readonly /> <a href="#" class="remove-camera">remove</a></div>'); //add input box         }     });      $(wrapper).on("click",".remove-camera", function(e){ //user click on remove text         e.preventdefault(); $(this).parent('div').remove(); x--;     }) }); <div class="cameras">             <div class="camera-field"><button class="add-camera btn btn-primary">+ add camera</button></div>             <div style="clear:both;"></div>              <div class="form-group"><input type="text" name="camera" value="" placeholder="camera 1" class="form-control cameras" readonly /></div>              </div> 

everything works fine adding fields, i'm hung when remove 1 of fields numerical order gets off.. how make update remaining fields stay in proper numerical order each time add or remove field:

camera 1
camera 2
camera 3
etc...

thanks ahead of time!

i added jquery "each" loop re placerholder, name, , value each input field every time remove link clicked. when using each value passed function index of item in loop's current iteration, used variable elm. since each input field classed camerascounter, can use $(this) call input element in loop. each useful part of jquery, if ask me.

http://jsfiddle.net/v76zn30o/2/

the html

<div class="cameras">             <div class="camera-field"><button class="add-camera btn btn-primary">+ add camera</button></div>             <div style="clear:both;"></div>              <div class="form-group"><input type="text" name="camera" value="" placeholder="camera 1" class="form-control camerascounter" readonly /></div>              </div> 

and jquery

$(document).ready(function() { var max_fields      = 32; //maximum input boxes allowed var wrapper         = $(".cameras"); //fields wrapper var add_button      = $(".add-camera"); //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 class="form-group"><input type="text" name="camera '+ x +'" value="camera '+ x +'" placeholder="camera '+ x +'" class="form-control camerascounter" readonly /> <a href="#" class="remove-camera">remove</a></div>'); //add input box         }     });      $(wrapper).on("click",".remove-camera", function(e){ //user click on remove text         e.preventdefault(); $(this).parent('div').remove();          $(".camerascounter").each(function(elm){             x = elm + 1             $(this).attr({                 "placeholder": "camera " + x,                 "name": "camera " + x,                  "value": "camera " + x             });                      });        });  });