jquery - JavaScript is not working inside the add more button which contain the dropdown and field -

the problem is, add more button contains 2 fields: drop-down menu , comment field. when select drop-down menu completed comment field required. javascript working fine fields not inside add more button.

below code:

html

<form class="form-horizontal" method="post" action="new.php">     <!-- select basic -->     <div class="form-group">         <label class="col-md-4 control-label" for="selectbasic">status</label>         <div class="col-md-4">             <select id="status" name="status[]" class="form-control" >                 <option value="pending">pending</option>                 <option value="work in process">work in process</option>                 <option value="completed">completed</option>             </select>         </div>     </div>      <!-- text input-->     <div class="form-group">         <label class="col-md-4 control-label" for="textinput">comment</label>           <div class="col-md-4">             <input id="commentss" name="comment[]" type="text" placeholder="" class="form-control input-md" />          </div>     </div>      <div class="input_fields" style="color:black">         <button class="add_field btn " onclick="incrementvalue()" >add more</button>     <div>      <input type="text" name="mytextt[]" hidden="" > </div> </div> </div>  <button id="save_btn" name="save_btn" type="submit" onclick="validate();" class="btn btn-success" >save</button> </form> 

javascript:

<script type="text/javascript">     function validate() {         var input=document.getelementbyid("status");         var comm=document.getelementbyid('commentss')         var inputelement=input.value;          if (inputelement=="completed") {             comm.required=true;         }         else {             comm.required=false;         }      } </script>  $(document).ready(function() {     var max_fields      = 10; //maximum input boxes allowed     var wrapper         = $(".input_fields"); //fields wrapper     var add_button      = $(".add_field"); //add button id     var wrapper_pre1         = $(".present_fields_1"); //fields wrapper     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).prepend('<div class="form-group"> <label class="col-md-4 control-label status" for="selectbasic" style="">status</label><div class="col-md-6"><select id="status" name="status[]"  class="form-control status"><option value="pending">pending</option><option value="work in process">work in process</option><option value="completed">completed</option></select></div></div><div class="form-group"><label class="col-md-4 control-label comment" for="textinput" style="">comment</label><div class="col-md-4"><input id="comments" name="comment[]" type="text" placeholder="" class="form-control input-md comment" style=""></div></div>')     } }); 

you wrapping elements twice in $. $(add_button) , $(wrapper) undefined forcing script stop executing. click handler should follows:

  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.prepend(...);     } });