javascript - Second append doesn't work on jquery -

i have form , need append field many times required. if button click add field clicked div should appended. after first append (onload), div responses correctly second 1 on, not getting similar response div. here jsfiddle

if click on test button , alert first div on adding div (by clicking click add field button) , button (test) doesn't work anymore second div onwards.

i tried clone() unable solve one. may not using correctly.

to replicate issue please follow steps::

• click on click add field button add div
• click on test button on second div onwards

please take , suggest. in advance.

you have use delegation $(document).on('click','.test',function(){

var count = 1;  	  $.fn.addclients = function(add){  	  var mydiv = '';    mydiv = '<div class="dataadd"><fieldset><legend>test: '+add+'</legend><b>test name :</b> <input type="text" id="ct'+add+'" name="cname" value="" style="width:250px" />'+              ' <button class="test" id="test" style="float:left;">test</button>'+  '<br>'+  '</fieldset></div>';  //$(".dataadd").clone().appendto('#registerform');          $('#registerform').append(mydiv);  }  $.fn.addclients(count);    $(document).on('click','#btn',function(){  		++count;  		$.fn.addclients(count);          return false;  });    $(document).on('click','.test',function(){  		alert("test");      return false;  });

.zend_form{     font-weight:bold;  	font-size:10px;  	width:358px;       float: left;        }  .dataadd{  	font-weight:bold;  	font-size:10px;  	width:358px;  	//border: 1px solid;  	margin-top: 15px;  	margin-bottom: 15px;  	//padding: 5px;  	//float:left;  }  .selectbox{  	margin-top: 15px;  	width:155px;   	height:100px;  }  .buttonc{  	background-color: #fff;  	width:145px;   	height:45px;  }  .selection_area{  	font-weight:bold;  	font-size:10px;  }  input {  	width: 200px;  }    dt {   width:50%; /* adjust width; make sure total of both 100% */     }  dd {   width:80%; /* adjust width; make sure total of both 100% */  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form id="registerform" enctype="application/x-www-form-urlencoded" method="post" action=""><dl class="zend_form">  <dt id="firstname-label"><label for="firstname" class="required">first name:</label></dt>  <dd id="firstname-element">  <input type="text" name="firstname" id="firstname" value="" style="width:200px; float:left;" /></dd>  <dt id="middlename-label"><label for="middlename" class="optional">last name</label></dt>  <dd id="middlename-element">  <input type="text" name="middlename" id="middlename" value="" style="width:200px" /></dd>      </form>        <div style='display:table;background-color:#ccc;width:99%;padding:5px;'>  	        <button class='buttonc' name='btn_sub' id='btn' style='float:left;'>click add field</button>  	</div>