I have an existing page where I have a single row with two textboxes that will accept an email and phone number. Now I need to modify this page so that users can add an additional email and phone numbers if need by a button click. So I used jquery to create this new row with two textboxes every time the user clicks on the provided button. Html elements are getting added to the DOM but the knockout view model is not getting updated.
I am not sure how I can update the ViewModel using jquery for these new items. I tried to create a ko.observable for newly created controls and tried to add to the existing ViewModel (UserDetailsViewModel). But I am not able to see newly created elements attached to the viewModel. This is my first time using knockout and needs some guidance on how to achieve this. Any links or sample code is greatly appreciated.
class UserDetailsViewModel {
public UserDetails: knockoutObservableArray<any> = ko.observableArray([]);
public Email: knockoutObservable<string> = ko.observable('');
public Phone: knockoutObservable<number> = ko.observable('');
}