append value to textbox on changing dynamic selectbox <p>I have created a dynamic bootstrap form. Input field is being created by clicking 'add field' button. now am trying to get value of select box into respective textbox in same parent div. but i failed to do so. my code is below:</p> <pre><code>&lt;div class="input_fields_wrap_credit "&gt; &lt;div class="form-group"&gt; &lt;h3&gt;Credit / Deposit &lt;a href="#add_credit_control" class="add-btn pull-right add_credit_field_button"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt; add credit field&lt;/a&gt;&lt;/h3&gt; &lt;/div&gt; &lt;!-- /form-group --&gt; &lt;div class="form-group"&gt; &lt;div class="form-input col-md-2"&gt; &lt;input id="cr_ac_no" name="cr_ac_no[]" type="text" placeholder="Account no." class="form-control input-sm" required="" value=""&gt; &lt;/div&gt; &lt;div class="form-input col-md-6 col-xs-12 "&gt; &lt;select name="cr_gl_head[]" class="form-control cr_gl_head"&gt;&lt;?=$accounts-&gt;GET_CHART_OF_AC()?&gt;&lt;/select&gt; &lt;/div&gt; &lt;!-- /controls --&gt; &lt;div class="form-input col-md-3 col-xs-12 "&gt; &lt;input type="text" name="cr_amount[]" class="form-control cr_amt" maxlength="10" placeholder="Amount"&gt; &lt;/div&gt; &lt;!-- /controls --&gt; &lt;a href="#" class="remove_field"&gt;&lt;i class="fa fa-remove"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt;&lt;!--form-group --&gt; &lt;/div&gt; </code></pre> <p>JQUERY:</p> <pre><code>&lt;!--credit --&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper = $(".input_fields_wrap_credit"); //Fields wrapper var add_button = $(".add_credit_field_button"); //Add button ID var y = 1; //initlal text box count $(wrapper).on('click','.add_credit_field_button',function(e){ //on add input button click e.preventDefault(); if(y &lt; max_fields){ //max input box allowed y++; //text box increment $(wrapper).append('&lt;div class="form-group"&gt;&lt;div class="form-input col-md-2"&gt;&lt;input id="cr_ac_no" name="cr_ac_no[]" type="text" placeholder="Account no." class="form-control input-sm" required="" value=""&gt;&lt;/div&gt;&lt;div class="form-input col-md-6 col-xs-12 "&gt;&lt;select name="cr_gl_head[]" class="form-control cr_gl_head"&gt;&lt;?=$accounts-&gt;GET_CHART_OF_AC()?&gt;&lt;/select&gt;&lt;/div&gt; &lt;!-- /controls --&gt; &lt;div class="form-input col-md-3 col-xs-12 "&gt;&lt;input type="text" name="cr_amount[]" class="form-control cr_amt" maxlength="10" placeholder="Amount"&gt;&lt;/div&gt; &lt;!-- /controls --&gt;&lt;a href="#" class="remove_field"&gt;&lt;i class="fa fa-remove"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;!--form-group --&gt;'); //add input box $('#num_cr').val(y); //number of credit field }else{ alert('Maximum allowed 10 fields.'); } }); $(wrapper).on("click",".remove_field", function(e){ //user click on remove text e.preventDefault(); $(this).parent('div').remove(); y--; }) }); &lt;/script&gt; //append ac no. to text box &lt;script type="text/javascript"&gt; $(document).ready(function() { var wrapper = $(".input_fields_wrap_credit"); //Fields wrapper $(wrapper).on("change",".cr_gl_head", function(e){ //user click on remove text e.preventDefault(); var ac_no = $(this).val(); var txt = $(this).parent('div').find('#cr_ac_no').val(ac_no); }); }); &lt;/script&gt; </code></pre> <p>Any help please?</p>