JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<body>
	<div id="main-wrapper">
		
		<aside>
			ABC
		</aside>
		<div id="outer-wrapper">
			<div id="heading">
				Create Estimate
			</div>
			<div id="sub-cover">
				<div id="leftcover">
					<div id="project-name" class="spacing">
						<div id="p-heading" class="letter-style">
							Name of the estimate/project
						</div>
						<div id="edit-project-name-on-click">
							<input id="project-name-input" data-bind="value: projectName, click: update" maxlength="70">
						</div>
						<div id="editable-project-name">
							<a id="p-link" class="link-style" href="#" data-bind="text: projectName"></a>
							<span id="editprojectnameicon" class="edit-icon" data-bind="click: editagain"><img src="images/Edit1.png"></span>
						</div>
						<div id="project-error-msg">
							Enter Project/Estimate Name
						</div>
					</div>
					
					
				</div>
				<span class="divider"></span>
				<div id="rightcover">
					<div id="verticla-name" class="spacing">
						<div id="v-heading" class="letter-style">
							Vertical of the project
						</div>
						<div id="vertical-dropdown">
						<!--	<input id="vertical" value="1" style="width: 40%;" />-->
							<select id="verticals" data-bind="source: verticals, value: verticalselect"></select>
						</div>
						<div id="editable-vertical-name">
							<!--<a id="v-link" href="#"> Web...

CSS

*{font-family: Open Sans;font-size: 12px;}
body{margin: 0;}
header{display: block;margin: 0;padding: 0;width: 100%;height: 50px;background-color: #2C3742;};
aside{width: 45px;background-color: grey;float: left;height: 1500px;}
#outer-wrapper{padding-left: 70px;}
#heading{font-size: 24px;font-family:Open Sans; padding-top: 1%;font-weight: 300;}
#sub-cover{border: 1px solid #dddddd;margin-top: 30px;float: left;width: 98%;box-shadow: #f2f2f2 2px;background-color: #fbfbfb;}
/*#project-name{padding: 30px 0 0 30px;}*/
.spacing{padding:30px 0 30px 30px; }
#editable-project-name{padding-top: 10px;display: none;}
#editable-vertical-name{padding-top: 10px;display: none;}
#edit-project-name-on-click{padding-top: 0px;}
#p-heading{padding-bottom: 10px;display: inline-block;font-size: 12px;}
#project-name{float: left;}
#v-heading{padding-bottom: 10px;display: inline-block;font-size: 12px;}
.link-style{font-family:Open Sans;font-size: 12px;text-decoration: none;color: #1f73af;}
.letter-style{font-family:Open Sans;}
.addborder{border-bottom: 1px solid #dddddd;}
#leftcover{float: left;width: 50%;}
#rightcover{float: left;width: 40%;}
.divider{border-right: 1px solid #dddddd;height: 60px;float: left;display: block;margin: 28px 0px;}
#stocks_tbl{float: left;margin-top: 50px;width: 100%;}
#estimate-heading{font-weight: bold;padding: 30px 0 0px 0;float: left;font-size: 15px;width: 98%;height: 30px;}
#share-icon{float: right;}
#table-border{float: left;width: 98%;margin-top: 20px;}
/*span.k-icon.k-i-arrow-s {background-image: url('images/Drop.png');background-position: 0 0;background-size: 10px 10px;}*/
#tabstrip{background-color: white;border: none !important;}
#tabstrip ul{display: inline-block;}
#appendbutton{display: inline-block;position: absolute;top: -7px;}
#appendbutton button{height: 39px;}
.k-button{background: #1f73af;color: white;margin-top: 10px;}
.k-image{position: absolute;right: 4px;top: 13px;}
.k-link{margin-right: 10px;}
.stack-style{margin: 30px 0 30px 0;display:...

JavaScript

$(document).ready(function () {

    
    // Class for saving and restoring an Object
    function SaveObject(obj) {
        // Saved Object
        this.object = null;

        // Save Object
        this.set = function (obj) {
            this.object = obj;
        };

        // Retrieve saved Object
        this.get = function () {
            return this.object;
        };
        this.set(obj);
    };

    if (localStorage["estimate_details"]) {
        localStorage.removeItem("estimate_details");
    };

    function estimateTypeEditor(container, options) {
        var appendItem=$('<input data-value-field="Functional" data-bind="value:' + options.field + '"/>')
            appendItem.appendTo(container)
            .kendoDropDownList({
                //autoBind: false,
                dataTextField: "text",
                dataValueField: "value",
                value: "horizontal",
                dataSource: [{ text: "Functional", value: "horizontal" },
                { text: "Non-functional", value: "vertical"}]
            });
    }

    var devhours = [];
    //var tempvar2 = 0;
    var count = 0;
    devhours[count]=0;
    var total = 0;
   // var sum = 0;
   var dh = 0;
    function initialiseTable(n){


            var entries = [
        { "id":"1", "Task":"Monday", "Subtask":"","Estimate":"","Comments":"" },
        { "id":"2", "Task":"", "Subtask":"","Estimate":"","Comments":"" },
        { "id":"3", "Task":"", "Subtask":"","Estimate":"","Comments":"" }
    ];
    var savedArray = new SaveObject(entries);
    // localStorage["estimate_details"] = JSON.stringify(entries);

    var stocksDataSource = new kendo.data.DataSource({
        transport:{
            read:function (options) {
                return options.success(entries);
            }
        },
        aggregate:{
        
        field:"Estimate",aggregate:"sum"
        
        },
        schema: {
                model: {
                    id: "ID",
                   ...