javascript - jquery event binding not working with more than one dynamic object -

on drop-down menu change of dynamically added object through ajax, either add or remove class. if 1 object exists code works, reason more 1 stop working.

$('.product_options_container').on('change', '.product_preset_dropdown', function() {     var conceptname = $(this).closest('.product_option_hidden').children('.product_preset_dropdown').find(":selected").text();     if(conceptname != 'custom'){         $(this).closest('.product_option_hidden').children('.product_encapsulation').addclass("hidden");     }     else if(conceptname == 'custom'){         $(this).closest('.product_option_hidden').children('.product_encapsulation').removeclass("hidden");     } }); 

markup

// div container ajax loaded <div id="dynamicinputs" class="dynamicinputs"></div>  // ajax file loaded <div class='product_option_hidden'>     <div class="product_preset_inner">         <div class="product_preset_inner_border">             <div class="product_preset_dropdown_container">                 <select class="product_preset_dropdown">                     <option value="custom">custom</option>                     <option value="preset">preset</option>                      <option value="preset2">preset 2</option>                  </select>              </div>          </div>      </div>      <div class="product_encapsulation">          //other content here       </div>  </div> 

problem

var conceptname = $(this).closest('.product_option_hidden').children('.product_preset_dropdown').find(":selected").text(); 

was adding additional custom string output each additional object added, changed below work

var conceptname = $(this).closest('.product_preset_dropdown').find(":selected").text();