KnockoutJS

<table id="tblCountryList" border="1" class="tableStyle">
<thead>
<tr>
<th>Country</th>
<th>State</th>
</tr>
</thead>
<!-- Iterating through every list item using foreach of KO -->
<tbody data-bind="foreach: Countries">
<tr>
<td><input data-bind="value: CountryName" /></td>
<td><input data-bind="value: StateName" /></td>
</tr>
</tbody>
</table>
<br />
<button data-bind="click: AddCountries.bind($data,'', '', true)">Add State</button>

　　$(document).ready(function(){
var completeCountryList = new CountryListViewModel();
var cityArray = [["Beijing", "China"],["New York","US"],["Tokyo","Japan"]];
$.each(cityArray, function(index, item){
completeCountryList.AddCountries(item[0], item[1], false);
});

ko.applyBindings(completeCountryList);
});
//class for saving the countries and their states
function CountryList(countryName, stateName, isUpdated) {
var self = this;
self.CountryName = countryName;
self.StateName = stateName;
//IsUpdated is just to keep tab of rows that are added/removed from the table. This is not a SP column
self.IsUpdated = isUpdated;
}

//View Model to combine data from list into the format which view expects
function CountryListViewModel() {
var self = this;
self.Countries = ko.observableArray([]);
self.AddCountries = function (countryName, stateName, isUpdated) {
self.Countries.push(new CountryList(countryName, stateName, isUpdated));
//hide success message
$("#success").hide();
}
　　}