Knockout JS

firstName :

ko.observable()

lastName :

fullName :

ko.computed()

secCounter : s

Change Log :

ko.observableArray([])

HTML:
                <ol  data-bind="foreach:newFriend">
    <li>
        <span data-bind="text:fullName"></span>
    </li>
</ol>

JavaScript:
                const obj = {
    newFriend: ko.observableArray([
        new friend("jesse ", "pinkman"),
        new friend("walter ", "white"),
    ]),
};

function friend(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = firstName + " " + lastName;
}

data-bind="foreach: ... "

HTML:
                <input type="checkbox" data-bind="checked:knowJS" />
<input type="text" data-bind="value:favLib, visible:knowJS"/>

data-bind="visible: ... "

HTML:
                <button data-bind="click:remove" class="remove-btn">X</button>
<input type="text" data-bind="value:newFriendLastName"/>
<input type="submit" data-bind="click:addFriend" />

JavaScript:
                function friend(firstName, lastName) {
    this.remove = function () {
        obj.newFriend.remove(this);
    };
}

obj.addFriend = function () {
    obj.newFriend.push(
        new friend(obj.newFriendName(), obj.newFriendLastName())
    );
};

data-bind="click: ... "

Number of Friends : /5

HTML:
                <p>
    Number Of Friends :
    <span data-bind="text:newFriend().length"></span>/5
</p>

<input
    type="submit"
    data-bind="click:addFriend, enable:newFriend().length < 5"
/>

data-bind="enable:newFriend().length < 5"

Good Enough :)

Knockout.js Tutorials

Good Luck...