JSFiddle - React, Tailwind, and code Playground

by daylight

HTML

<script src="http://code.jquery.com/jquery-1.9.1.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">
<div ng-app="" data-ng-controller="rowController">
  <div id="mainContent" class="row">
     <button ng-click="addSimpleItem()">Add Item</button>
      <button onclick="init()">Init DatePicker</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="datepickFix" onclick="init();"> 
                   <input class="datepicker" type="text" /> 
                   <span class="datepickFix" onclick="init()" >click me</span>
                   </div>
               </td>
        </tr>
                 </tbody>
                </table>
            </form>
        </div>
      </div>
    </div>
<div class="datepickFix"> <input class="datepicker" type="text"/>
    <span class="datepickFix" id="outerPick">click me</span>
</div>

JavaScript

function rowController($scope) 
{
  
    function simpleItem(id) {
        this.id = id;
    }

    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();
        $scope.init();
    }

    function checkBoxClicked(selectedItem) {
            alert(selectedItem);
    }

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

function init(selId)
{
    if (console.log !== undefined)
    {
        console.log("init()...");
    }
    $(function() {
        $( ".datepicker" ).datepicker({
          changeMonth: true,
          changeYear: true
        });
      });
    if (selId !== undefined)
    {
        $(".datepickFix").on("click","#" + selId, function (){
            $(".datepicker").datepicker( "show" );
        });
    }
    else
    {
        $(".datepickFix").on("click",".datepickFix", function (){
            $(".datepicker").datepicker( "show" );
        });
    }
}