https://stackoverflow.com/questions/44656799/dynamically-add-new-div-after-page-load

by jlspake

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <div data-bind="foreach: users">
        <input data-bind="value: name" />
        <input data-bind="value: position" />
        <input data-bind="value: email" />
        <br/>
    </div>
</div>
<button id='addNew'>NEW</button>

JavaScript

function vm() {
		var self = this;
    this.users = ko.observableArray([new User({name: 'user 1'}), new User({name: 'user 2'})]);
    this.addUser = function(data){
        self.users.push(data);
    };  
};

function User(data){
    this.name= ko.observable(data.name);
    this.position= ko.observable('test position');
    this.email= ko.observable('test email');
}

ko.applyBindings(vm);

$('#addNew').on('click', function () {
        var strClientSec = $(`<div class="sec">
        <input data-bind="value: name" />
        <input data-bind="value: position" />
        <input data-bind="value: email" />
    		<button data-bind="click: addUser">SAVE</button>
        </div>`);
        $($(this)).before(strClientSec);
        ko.applyBindings(new User(''), strClientSec.get(0));
})