JSFiddle - React, Tailwind, and code Playground

by Amit Bhagat

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
  <div class="container">

    <h1>Solution 1</h1>
    <div class="panel panel-primary">

      <div class="panel-heading">Job Completion Form</div>
      <div class="panel-body">

        <div>
          <div class="form-horizontal control-label-text-left">

            <!-- job number -->
            <div class="form-group">
              <label class="col-sm-4 col-md-4 col-lg-5 control-label">Job Number</label>
              <div class="col-sm-8 col-md-4 col-lg-6">
                <input class="form-control" type="text" placeholder="Job number">
              </div>
            </div>

            <!-- area -->
            <div class="form-group">
              <label class="col-sm-4 col-md-4 col-lg-5 control-label">Area</label>
              <div class="col-sm-8 col-md-4 col-lg-6">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Area 1
                  </label>
                  <label>
                    <input type="checkbox"> Area 2
                  </label>
                  <label>
                    <input type="checkbox"> Area 3
                  </label>
                </div>

              </div>
            </div>

            <!-- Completion Date -->
            <div class="form-group">
              <label class="col-sm-4 col-md-4 col-lg-5 control-label">Completion Date</label>
              <div class="col-sm-8 col-md-4 col-lg-6">
                <div class="input-group date">
                  <input class="form-control"...

CSS

body{
  padding-bottom:3em;
}

JavaScript

(function () {
  "use strict";

  function createJobItem() {
    return {
      jobNo: '2020-23',
      area: '',
      compDate: '',
      staffH: 0,
      machineH: 0,
      comment: ''
    }
  }
  function ViewModel() {
    var self = this;

    // no. of items
    self.items = ko.observableArray([]);

    // create job items
    self.add = function () {
      self.items.push(createJobItem());
    }
  }

  jQuery(document).ready(function () {

    var model = new ViewModel();
    model.items.push(createJobItem());

    ko.applyBindings(model);

  });

})();