JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<ul data-bind="foreach: people">
        <li>
            <div>
                <span data-bind="text: name"></span> has <span data-bind='text: items().length'>&nbsp;</span> children: 
                <ul data-bind="foreach: items">
                    <li data-bind="text: family"></li>
                </ul>

                <a href="#" data-bind="click: showModal">Add new Item</a>
                <div class="modal hide fade" data-bind="showModal: displaySubmitModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-bind="click: closeSubmitModal" data-dismiss="modal" aria-hidden="true">
                            &times;</button>
                        <h3>My Editor for <span data-bind="text: name"></span></h3>
                    </div>
                    <div class="modal-body">
                        Add task:
                        <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-primary" data-bind="click: addTask">Add Note</a>
                        <a href="#" class="btn" data-bind="click: closeSubmitModal" data-dismiss="modal">Close</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>

JavaScript

ko.bindingHandlers.showModal = {
         init: function (element, valueAccessor) {
             $(element).modal({ backdrop: 'static', keyboard: true, show: false });
         },
         update: function (element, valueAccessor) {

             var value = valueAccessor();
             if (ko.utils.unwrapObservable(valueAccessor())) {
                  $(element).modal('show');
                 $("input", element).focus();
             }
             else {

                 $(element).modal('hide');
             }
         }
     };


var Task = function(data) {
   var family = ko.observable(data.family);
    return { family: family};
}

var personModel = function() {  
    var people = ko.observableArray([
       new testModel("Person",["one","two","three"]),
       new testModel("Person2",["one2","two2","three2"]),
       new testModel("Person3",["one3","two3","three3"])
       ]);
    return {
             people: people
            };
};

var TaskItem = function(data) {
     var family = ko.observable(data); 
    return { family: family};
}

var testModel = function(familyName,children){
   var itemToAdd = ko.observable("");
   var name = familyName;
   var items = ko.observableArray([]);

   for(var i = 0; i<children.length;i++){
      items.push(new TaskItem(children[i]));
   }

   var currentItem = ko.observable();
   var newTaskText = ko.observable();
   var displaySubmitModal = ko.observable(false);
   var showModal = function(){
       displaySubmitModal(true);
   };
   var closeSubmitModal = function(){
       displaySubmitModal(false);
       newTaskText("");
   };

   // Operations
   var addTask = function() {
       items.push(new Task({ family: newTaskText() }));
       newTaskText("");
       displaySubmitModal(false);
   }; 
   
    return {
        items: items,
        showModal: showModal,
        displaySubmitModal: displaySubmitModal,
        closeSubmitModal: closeSubmitModal,
        name: name,
        newTaskText: newTaskText,
      ...