JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="row semployeeform">
<div class="col-md-4">
    <form>
        <div class="form-group">
            
            <label for="form_semployeecode">Enter Employee Code:</label>
            <input type="text" class="form-control" id="form_semployeecode" placeholder="Enter Employee Code" data-bind="value:selectedEmployee().EmployeeCode">         
        </div>
        <div class="form-group">
            <label for="form_semployeename">Enter Employee Name:</label>
            <input type="text" class="form-control" id="form_semployeename" placeholder="Enter Employee Name" data-bind="value:selectedEmployee().EmployeeName">         
        </div>
        <div class="form-group">
            <label for="form_semployeemail">Enter Employee Mail:</label>          
            <input type="text" class="form-control" id="form_semployeemail" placeholder="Enter Employee Mail" data-bind="value:selectedEmployee().Mail">
        </div>
        <button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
            <button class="btn btn-primary" data-bind="click:addNewEmployee">Add New Employee</button>
    </form>
</div>
</div>
<div class="row">
<div class="col-md-4">
    <div class="panel panel-default">
    <br>
        <div class="panel-heading">
            <span>Employee table</span>
        </div>
        <div class="panel-body">
            <!-- ko if: Employees().length > 0 -->                
                <table class="table table-condensed table-hover">
                    <tr> 
                        <th>Employee Code</th>
                        <th>Employee Name</th>
                        <th>Employee Mail</th>          
                        <th></th>
                    </tr>                
                    <tbody>
...

JavaScript

var employeeData = '[{"EmployeeCode":"0001","EmployeeName":"Tom","Mail":"[email protected]"},{"EmployeeCode":"0002","EmployeeName":"jerry","Mail":"[email protected]"}]';

console.log(employeeData);
var employees = ko.mapping.fromJSON(employeeData);
console.log(employees());
var viewModel ={};

var newEmployee = {"EmployeeCode":"","EmployeeName":"","Mail":""};



var selectedEmployee=ko.observable();


selectedEmployee.subscribe(function(){
    console.log('selected employee changed');
    console.log(selectedEmployee().EmployeeName());
});

var addNewEmployee=function(){
    var newEmployee = {"EmployeeCode":ko.observable(""),"EmployeeName":ko.observable(""),"Mail":ko.observable("")};
    employees.push(newEmployee);
    selectedEmployee(newEmployee);
}

//call addNewEmployee to set the edit form to a new employee record at initialisation
addNewEmployee();



viewModel.Employees=employees;
viewModel.selectedEmployee=selectedEmployee;
viewModel.addNewEmployee=addNewEmployee;


ko.applyBindings(viewModel);