JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://include.jaydata.org/jaydata.js"></script>

JavaScript

$data.define("Org.Department",{
  ID: {key: true, type: "int", computed: true},
  DepartmentID: {type: "int", required: true},
  DepartmentName: {type: "string", required: true},
  Employee:{type: Array, elementType: "Org.Employee", inverseProperty: "Department"},
  Stock:{type: Array, elementType: "Org.Stock", inverseProperty: "Department"}
});

$data.define("Org.Employee",{
  ID: {key: true, type: "int", computed: true},
  Name: {type: "string", required: true},
  DepartmentID: {type: "int", required: true},
  Department: {type: "Org.Department", inverseProperty: "Employee"}
});

$data.define("Org.Stock",{
  ID: {key: true, type: "int", computed: true},
  DepartmentID: {type: "int", required: true},
  Description: {type: "string"},
  NumItems: {type: "int", required: true},
  Department: {type: "Org.Department", inverseProperty: "Stock"}
});

$data.EntityContext.extend("Company",{
  Employees: {type: $data.EntitySet, elementType: Org.Employee},
  Departments: {type: $data.EntitySet, elementType: Org.Department},
  Stocks: {type: $data.EntitySet, elementType: Org.Stock}
});

var x= new Company({
  provider: "webSql",
  databaseName: "DB",
  version: 1
});

x.onReady(function(){
    var newDep = new x.Departments.elementType({DepartmentName: 'dep1', DepartmentID: 7});
    x.Departments.add(newDep);
    x.saveChanges(function() {
        x.Departments.first("it.DepartmentName == 'dep1'", {}, function(dep){
              console.log(dep);
              x.Departments.attach(dep);
              var emp = new Org.Employee({
                Name: 'Employee1',
                DepartmentID: dep.DepartmentID,
                Department:dep
              });
              console.log(emp);
              x.Employees.add(emp);
              x.Employees.saveChanges();
        });
    })
});