javascript - how to add text box dynamically using jQuery? -

i using below code add textbox when no option clicked in select box. adds first row every time. need add textbox selected row not adding properly.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>         <form id="form1" runat="server">             <div>                 <input id="btnadd" type="button" value="add" />                     <div id="textboxcontainer">                     <!--textboxes added here -->                 </div>               </div>         </form>          <script>         $(function() {             $("#btnadd").bind("click", function() {                 addcontrol();             });              $("#btnget").bind("click", function() {                 var values = "";                 $("input[name=dynamictextbox1]").each(function() {                     values += $(this).val() + "\n";                 });                   var values = "";                 $("input[name=dynamictextbox2]").each(function() {                     values += $(this).val() + "\n";                 });                  alert(values);             });              $("body").on("click", ".remove", function() {                 $(this).closest("div").remove();                   });             });         function getdynamictextbox1(value) {                  return '<input name = "dynamictextbox1"  id="ingr_name" type="text" value = "' + value + '" required/>&nbsp'  +                 '<select name="selecval" onchange="selectres(this.value)" id="selecval"><option value="">select</option><option value="1">yes</option><option value="2">no</option></select>'                 +'<input name = "dynamictextbox2" style="display:none" id="res_name" type="text" value = "' + value + '" required/>&nbsp'+ '<input type="button" value="remove" class="remove" />'                  }                 function selectres(x){                      var selection=x;                     if(selection == '2'){                         $("#res_name").show();                     }else{                         $("#res_name").hide();                     }                 }                 function addcontrol() {                   var div = $("<div />");                  div.append(getdynamictextbox1(''));                   $("#textboxcontainer").append(div);             }               </script> 

pls can supparate single , double quts this

 function getdynamictextbox1(value) {          return '<input name = "dynamictextbox1"  id="ingr_name" type="text" value = "' + value + '" required/>&nbsp'  +         '<select name="selecval" onchange="selectres(this.value)" id="selecval"><option value="">select</option><option value="1">yes</option><option value="2">no</option></select>'         +$('body').append('<input name = "dynamictextbox2" style="display:none" id="res_name" type="text" value = "' + value + '" required/>')&nbsp+ '<input type="button" value="remove" class="remove" />'          }    

the problem approach 1 element can have given id attribute; if multiple elements share same id (as case #res_name element) first element found. there ways around this, using $('[id=res_name]') selector, inappropriate since leaves invalid html in dom.

in case, then, removed id attribute elements being added, removing inline event-handler, , replaced selectres() function following event-delegation, using jquery's on() method:

// binding event-handler ancestor <form> element, // assigning anonymous function event-handler // 'change' event when originating on elements matching // css 'select' selector: $('form').on('change', 'select', function(e) {    // converting e.target (the <select> dom node   // upon event triggered)   // jquery object:   $(e.target)     // finding matching siblings of <select>     // element match supplied selector,     // returns <input> elements of type=text     // , name attribute 'dynamictextbox2':     .siblings('input[type=text][name=dynamictextbox2]')     // toggling (showing or hiding) <input> element     // depending on whether switch (the supplied     // evaluation/assessment) returns true/truthy     // (which show element) or false/falsey     // (which hide element):     .toggle(e.target.value === '2'); }); 

$(function() {    $("#btnadd").bind("click", function() {      addcontrol();    });      $("#btnget").bind("click", function() {      var values = "";      $("input[name=dynamictextbox1]").each(function() {        values += $(this).val() + "\n";      });      var values = "";      $("input[name=dynamictextbox2]").each(function() {        values += $(this).val() + "\n";      });        alert(values);    });      $("body").on("click", ".remove", function() {      $(this).closest("div").remove();    });  });  $('form').on('change', 'select', function(e) {    $(e.target).siblings('input[type=text][name=dynamictextbox2]').toggle(e.target.value === '2');  });    function getdynamictextbox1(value) {      return '<input name = "dynamictextbox1"  id="ingr_name" type="text" value = "' + value + '" required/>&nbsp' +      '<select name="selecval"><option value="">select</option><option value="1">yes</option><option value="2">no</option></select>' +      '<input name = "dynamictextbox2" style="display:none" type="text" value = "' + value + '" required/>&nbsp' + '<input type="button" value="remove" class="remove" />'    }    function addcontrol() {    var div = $("<div />");    div.append(getdynamictextbox1(''));      $("#textboxcontainer").append(div);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form id="form1" runat="server">    <div>      <input id="btnadd" type="button" value="add" />      <div id="textboxcontainer">        <!--textboxes added here -->      </div>    </div>  </form>

js fiddle demo.