Uncaught ReferenceError: Unable to process binding foreach: function (){return Educations }

Uncaught ReferenceError: Unable to process binding foreach: function (){return WorkExperience }

I couldn't figure out why the binding is failing.

i have the following two tables one for Education and other for Work Experience, They give the error when i'm trying to bind the both table in one view, If i remove the binding (JS + HTML code) it works fine

HTML:

<div id=divtable1 class=widget widget-simple widget-table>

   <table id=Table1 class=table table-striped table-content table-condensed boo-table table-hover>

      <thead>

         <tr id=Tr1 class=filter>

            <th>University<span class=required>*</span></th>

            <th>Location <span class=required>*</span></th>

            <th></th>

         </tr>

      </thead>

      <tbody data-bind='foreach: Educations'>

         <tr>

            <td><input type=text class='span11 required' data-bind=value: SchoolName /></td>

            <td><input type=text class='span11 required' data-bind=value: Location /></td>

            <td><a href='#' data-bind='click: $root.removeEducation'>Delete</a></td>

         </tr>

      </tbody>

   </table>

   <button data-bind='click: $root.addEducation' class=btn btn-blue>Add Education</button>

</div>

<div id=divtable2>

   <table id=Table2>

      <thead>

         <tr id=Tr2 class=filter>

            <th>Employer Name<span class=required>*</span></th>

            <th>EmployerAddress <span class=required>*</span></th>

            <th></th>

         </tr>

      </thead>

      <tbody data-bind='foreach: WorkExperience'>

         <tr>

            <td><input type=text class='span11 required' data-bind=value: EmployerName /></td>

            <td><input type=text class='span11 required' data-bind=value: EmployerAddress /></td>

            <td><a href='#' data-bind='click: $root.removeWorkExperience'>Delete</a></td>

         </tr>

      </tbody>

   </table>

   <button data-bind='click: $root.addWorkExperience' class=btn btn-blue>Add Work Experience</button>

</div>

Java Script:

<script type=text/javascript>

    var Educations = function (educations) {



        var self = this;

        self.Educations = ko.mapping.fromJS(educations);



        self.addEducation = function () {

            self.Educations.push({SchoolName: ko.observable(), Location: ko.observable()});

        };



        self.removeEducation = function (education) {

            self.Educations.remove(education);

        };

    };



    var viewModel = new Educations(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Educations)));

    ko.applyBindings(viewModel);

</script>





<script type=text/javascript>

    var WorkExperience = function (workexperiences) {



        var self = this;

        self.WorkExperience = ko.mapping.fromJS(workexperiences);



        self.addWorkExperience = function () {

            self.WorkExperience.push({ EmployerName: ko.observable(), EmployerAddress: ko.observable()});

        };

        self.removeWorkExperience = function (workexperience) {

            self.WorkExperience.remove(workexperience);

        };

    };



    var viewModel = new WorkExperience(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.WorkExperience)));

    ko.applyBindings(viewModel);

</script>

Also I tried to bind Table1 but it didn't work

ko.applyBindings(viewModel, $('#Table1')[0]);