Dynamic create element and run function jQuery

Dynamic create element and run function jQuery

by Adi Jaya

HTML

<div id="form">
<div class="item">
  <input type="text" class="input"/>
  <input type="text" class="input"/>
  <input type="text" class="input"/>
  <input type="button" class="add" value="+"/>
  <input type="button" class="delete" value="X"/>
</div>
</div>

<br>
<button id="clear_and_reset">clear and reset</button>

<br><br>
<button id="example_send">example SEND</button>

CSS

.input {
  width : 40px;
}

.add {
  background:green;
  color : white;
}
.delete {
  background:red;
  color : white;
}
[type="button"] {
  cursor : pointer;
}

JavaScript

//libs jQuery 3.2.1
//facebook.com/nafis3333

$(function () {
	$('#clear_and_reset').on( "click",function () {
  	var Template = $('\n<div class="item">\n\t\t<input type="text" class="input"/>\n\t\t<input type="text" class="input"/>\n\t\t<input type="text" class="input"/>\n\t\t<input type="button" class="add" value="+"/>\n\t\t<input type="button" class="delete" value="X"/>\n</div>\n\n');
    
  	$('#form').empty().html(Template);   
	});

	$(document).on( "click", ".add", function () {
  	var first 		= $('.item:first').html();
  	var container =	$('#form');
  	var templ 		= $('<div class="item">'+first+'</div>');
    container.append(templ);    
	});
  
	$(document).on( "click", ".delete", function () {
  	var parent = $(this).parent();
    parent.remove();
	}); 
 
 
//example for sending
	$('#example_send').on( "click",function () {
  	alert ('example sending \n' + $('#form').html());
	});
  
  
});