knockout: unable to update the observable array in knockout while binding to table

Question

I am having two tables. In one table(parent table) I have options to add and delete rows in that one column is a dropdown column. based on the selection I need to load another table(child table) with data. I am able to do the operations on the parent table. but on the child table I am unable to push the data to the table though I can see I am able to pass the data to the child table. but the table is not populating with the data.

Here is my child table

<div id="childDiv">
        <table data-bind='visible: chldItem().length > 0'>
            <thead>
                <tr>
                    <th>Header1</th>
                    <th>Header2</th>
                    <th />
                </tr>
            </thead>
            <tbody data-bind='foreach: chldItem'>
                <tr>
                    <td><input class='required' data-bind='value: text, uniqueName: true' /></td>
                    <td><input class='required number' data-bind='value: defaultValue, uniqueName: true' /></td>
                </tr>
            </tbody>
        </table>
</div>

Here is the View Model for child table.

var ChildModel = function(chldItem) {
    var self = this;
    self.chldItem = ko.observableArray([]);
    if(chldItem.length > 0){
        self.chldItem.push(chldItem);
    }
};

ko.applyBindings(new ChildModel([]), document.getElementById('childDiv'));

// From Parent dropdown change

self.childConfig.push(1, new ChildModel(clearVM);

Here is the fiddle with the current version of code. http://jsfiddle.net/oneplusbot/xa90cymz/5/

I was Expecting when I choose first dropdown it will have 4 rows and for second it will show 2 rows