JSFiddle - React, Tailwind, and code Playground

by Mahavirsinh Padhiyar

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<table id="idTblTranItems" class="table table-striped table-bordered table-hover table-green dataTable" aria-describedby="dtAllClients_info">
  <thead>
    <tr class="btn-primary">
      <th style="text-align:center">Date<br /> (MM/dd/YYYY)</th>
      <th style="text-align:center">Column2</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: TransactionList" id="tbodyTransactionsNew">
    <tr>
      <td>
        <input class="form-control TransactionDate" type="text" data-bind="datePicker: TransactionDate" />
      </td>
      <td>
        <input type="text" class="form-control" data-bind="value: column2" />
      </td>
      <td>
        
      </td>
    </tr>
</table>

<button data-bind="click: adddata">remove
</button>

JavaScript

ko.bindingHandlers.datePicker = {
  init: function(element, valueAccessor) {
    var $element = $(element);
    $element
      .datepicker({
        autoclose: true,
        format: 'mm/dd/yyyy'
      });
  },
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var $element = $(element);
    $element.datepicker("setDate", value);
  }
};

function TransactionVM(vm) {
  var self = this;
  self.TransactionList = ko.observableArray([]);

  self.updateList = function(transactions) {
    transactions.forEach(function(transaction) {
      self.TransactionList.push(transaction);
    });
  };
  
  self.adddata = function(selectedtransaction){
  debugger;
     self.TransactionList = ko.observableArray([]);
  };
}

var vm = new TransactionVM();
ko.applyBindings(vm);

// this is your list of transactions to be written into table
var transactions = [];
for (var i = 0; i < 10; i++) {
  transactions.push({
    TransactionDate: new Date(),
    column2: "testing" + i
  });
}

vm.updateList(transactions);