JSFiddle - React, Tailwind, and code Playground

by daylight

HTML

<link rel="stylesheet" href="http://raddev.us/3rdPartyLibs/bootstrap3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://raddev.us/3rdPartyLibs/angular/angjqDate.js"></script>
<script src="http://raddev.us/3rdPartyLibs/bootstrap3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div data-ng-app="extra" 
   data-ng-controller="rowController">
  <div id="mainContent" class="row">
     <button ng-click="addSimpleItem()">Add Item</button>
      <div id="simpleItems">
         <h3>Line Items</h3>
           <form>
                <table>
                    <thead>
                        <tr>
                           <th>select</th>
                           <th>Item ID</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                  <tbody>
           <tr ng-repeat="l in allItems">
                <td> <input type="checkbox"  ng-init="itemId ='{{l.id.toString()}}'" ng-click="checkBoxClicked(itemId)" /></td>
             <td>
               <input class="form-control" type="text" value="{{l.id}}" />
             </td>
               <td>
               <div class="control-group input-append input-group" >
                 <input id="{{l.id}}cb"
                   class="input form-control cb" ui-date="dateOptions"
               ui-date-format="DD, d MM, yy" value="{{l.completedBy}}"
            value="completedBy" type="text" data-ng-model="l.completedBy" /> 
                      <span class="btn input-group-addon add-on" 
                        data-ng-click="showCalendar(l.id,'cb')" >
                        <span class="glyphicon glyphicon-calendar"></span>
                     ...

CSS

body {margin-top:5px;margin-left:10px}

JavaScript

var myAppModule = angular.module('extra', ['ui.date']);
 myAppModule.controller('rowController', rowController);

function rowController($scope) 
{
    $scope.dateOptions = {
	    changeYear: true,
	    changeMonth: true
	};
  
    function simpleItem(id) {
        this.id = id;
        this.completedBy = null;
    }

    function addRow() {
        var currentItem = new simpleItem("a");
        currentItem.id = getRandom(100000).toString() + "X" + getRandomLetters(5).toUpperCase();

        $scope.allItems.splice(0, 0, currentItem);
        

    }

    function getRandom(y) {
        // returns value between 1 and y (inclusive)
        return Math.ceil(Math.random() * y);
    }

    function getRandomLetters(numberOfLetters) {

        var outString = '';
        for (y = 0; y < numberOfLetters; y++) {
            outString += String.fromCharCode(97 + getRandom(25));
        }
        return outString;
    }

    function addSimpleItem() {
        addRow();
    }

    function checkBoxClicked(selectedItem) {
            alert(selectedItem);
    }
    
    function showCalendar(id,datepickerType)
	{
		$("#"+id+datepickerType).datepicker("show");
		console.log(id + " : " + datepickerType);
	}

    $scope.allItems = [];
    $scope.addSimpleItem = addSimpleItem;
    $scope.checkBoxClicked = checkBoxClicked;
    $scope.showCalendar = showCalendar;
}