javascript - Using rel attribute in document on change function? -

i use below code dynamic textbox. when change id=iuname1 has show result in fffinalresult1. when change id=iuname2 has show result in fffinalresult2. don't.

<script type="text/javascript"> var counter = 0; $(function () {     $("#btnadd").bind("click", function () {         var div = $("<div />");           div.html(getdynamictextbox(""));         $("#textboxcontainer").append(div);       });    }); function getdynamictextbox() {     counter++;     return 'item code : <select name="iuname" id="iuname" rel="' + counter + '" class="iuname" >'+             <?php foreach($titem $row) : ?>               '<option value="<?php echo $row->productid;?>"><?php echo $row->productid;?></option>'+             <?php endforeach;?>         '</select>'+          ' batch : <input id="buname" name="buname" rel="' + counter + '" class="buname">'+          </div>');          '<div rel="' + counter + '" class="fffinalresult" id=ffinalresult" ></div>'+          '<br/>'   } </script> 

and document on change function below.

<script>  $(document).on('change', $(".iuname[rel='"+ counter + "']"), function(){ var val = $(this).val(); var text = $(this).find('option:selected').text();  $(".ffffinalresultt[rel='"+ counter + "']").text(val);  });  </script> 

how works?

your code give values last inserted elements counter increasing each time add elements! suggest use class here instead of id!

var counter = 0;// can keep generate unique `id` bind events class  $(function () {     $("#btnadd").bind("click", function () {         var div = $("<div />");         div.html(getdynamictextbox(""));         $("#textboxcontainer").append(div);     }); });  function getdynamictextbox() {      counter++;      return          'item code : <select name="iuname" id="iuname_'+counter+'" rel="' + counter + '" class="iuname" >'+                <?php foreach($titem $row) : ?>                   '<option value="<?php echo $row->productid;?>"><?php echo $row->productid;?></option>'+                <?php endforeach;?>     '       </select>'+     ' batch : <input id="buname_'+counter+'" name="buname" rel="' + counter + '" class="buname">'+      '<div rel="' + counter + '" class="fffinalresult" id="ffinalresult_'+counter+'" ></div>'+     '<br/>'; 

}

and event binding class

$(document).on('change', ".iuname", function(){    var val = $(this).val();    var text = $(this).find('option:selected').text();    $(this).siblings(".fffinalresultt").text(val); //get sibling element });