jquery - How to append to multiple inputs with different names? -

i have multiple inputs text different names. append them adding new text box working fine. problem comes since input text fields have different names.

how can work using 1 function , not having create 1 each input?

i made simple https://jsfiddle.net/ke6br8xj/

$(document).ready(function() {     var max_fields3      = 30; //maximum input boxes allowed     var wrapper3         = $(".input_fields_wrap12"); //fields wrapper     var add_button3      = $(".add_field_button11"); //add button id     var wrapper6         = $(".input_fields_wrap11"); //fields wrapper     var x = 1; //initlal text box count     $(add_button3).click(function(e){ //on add input button click         e.preventdefault();         if(x < max_fields3){ //max input box allowed             x++; //text box increment             $(wrapper3).append('<div>   <input type="text" class="pets" name="super_stars_winner#currentrow#" size="35"  > <a href="#" class="remove_field"> remove</a></div>'); //add input box           }            $(document).ready(function() {         $('.pets').autocomplete({             source: function(query, response) {                 $.ajax({                     url: "search.cfc?method=querynames&returnformat=json",                     datatype: "json",                     data: {                         searchphrase: query.term                     },                     success: function(result) {                         response(result);                     }                 });             }         });     });     });      $(wrapper3).on("click",".remove_field", function(e){ //user click on remove text         e.preventdefault(); $(this).parent('div').remove();          x--;     })      $(wrapper6).on("click",".remove_field", function(e){ //user click on remove text         e.preventdefault(); $(this).parent('div').remove();          x--;     }) }); 

you can use $(document) instead of $(wrapper3)

if added specificity can create same event multiple classes.

option 1

$(document).on('click', '.remove_field', function(e){     //any class .remove_field trigger when clicked }); 

option 2

$(document).on('click', '.input_fields_wrap12 .remove_field, .input_fields_wrap11 .remove_field', function(){    //either element .remove_field child of .input_fields_wrap12    //or .input_fields_wrap11 jump in here when clicked }); 

note , in second option. inside selector quotes ''. use select multiple fields execute same event function