You can simply use knockout.js with HTML.
Include below files to your libs directory.
jquery-2.1.1.min
knockout-3.2.0
Now your HTML(or aspx page)
employeePhone.html
<html>
<head>
<script src="libs/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="libs/knockout-3.2.0.js" type="text/javascript"></script>
<script src="PhoneModal.js" type="text/javascript"></script>
<script src="PhoneViewModal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
ko.applyBindings(new PhoneViewModel());
});
</script>
</head>
<body>
<form id="employeeForm" name="employeeForm" method="POST">
<script id="PhoneTemplate" type="text/html">
<div>
<span>
<label>Country Code:</label>
<input type="text" id="txtCountryCode" data-bind="value:CountryCode" />
</span>
<span>
<label>Phone Number:</label>
<input type="text" id="txtPhoneNumber" data-bind="value:PhoneNumber" />
</span>
<input type="button" id="btnRemove">
value="Remove" data-bind="click: $parent.remove" />
</input></div>
</script>
<div>
<h2>Employee Phone Number</h2>
<div data-bind="template:{name:'PhoneTemplate', foreach:PhoneList}">
</div>
<div>
<input type="button" id="btnAdd">
value="Add Another" data-bind="click: add" />
</input></div>
</div>
</form>
</body>
</html>
2. PhoneModal.js
function Phone(code, number) {
var self = this;
self.CountryCode = ko.observable(code);
self.PhoneNumber = ko.observable(number);
}
3. PhoneViewModal
function PhoneViewModel() {
var self = this;
self.PhoneList = ko.observableArray([new Phone("00", "00-00-00")]);
self.remove = function () {
self.PhoneList.remove(this);
};
self.add = function () {
self.PhoneList.push(new Phone("01", "00-00-01"));
};
}
I hope this will help you to understand and to create your reuirement.
Submit an article or tip