JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="container" data-bind="foreach: conferences">
  <div class="conf" data-bind="attr: { id : 'conf-' + Id }">
    <div data-bind="with: userEditor">
      <input type="tel" placeholder="phone number" data-bind="value: phoneInput" />
      <input type="email " placeholder="email" data-bind="value: emailInput" />
      <!-- ko ifnot: editing -->
      <button data-bind="click: add">Add</button>
      <!-- /ko -->
      <!-- ko if: editing -->
      <button data-bind="click: save">Save</button>
      <button data-bind="click: reset">Cancel</button>
      <!-- /ko -->
    </div>

    <ul class="conf-users " data-bind="foreach: users ">
      <li class="conf-user " data-bind="attr: { id: 'confuser-' + Id}, click: $parent.onUserClick">
        <span data-bind="text: PhoneNumber "></span>
        <span data-bind="text: Email "></span>
      </li>
    </ul>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

JavaScript

// JSON data from the ajax call (an array of objects)
var data = [{
  "ConferenceUsers": [{
    "Id": 3006,
    "ConferenceId": 8,
    "Name": null,
    "Email": "mail@lala.com",
    "UserName": null,
    "PhoneNumber": "234234234234"
  }],
  "Id": 8,
  "Subject": "YYYhaaaaa",
  "StartTime": "2016-05-29T18:30:00",
  "EndTime": "2016-05-29T19:30:00",
  "OrganizerEmail": "elpas@live.com",
  "OrganizerName": "dasdasd",
}, {
  "ConferenceUsers": [{
    "Id": 3013,
    "ConferenceId": 12,
    "Name": null,
    "Email": "dsfdfsdfdsf@dfdfdf.com",
    "UserName": null,
    "PhoneNumber": null
  }],
  "Id": 12,
  "Subject": "dsfsdfdsfsdf",
  "StartTime": "2016-05-31T22:00:00",
  "EndTime": "2016-05-31T23:00:00",
  "OrganizerEmail": "d@adssad.com",
  "OrganizerName": "dsfdsfsdf"
}];

var UserEditor = function(users, conferenceId) {
  var self = this;

  this.editing = ko.observable(null);

  this.phoneInput = ko.observable("");
  this.emailInput = ko.observable("");

  this.clear = function() {
    self.phoneInput("");
    self.emailInput("");
  };

  this.add = function() {
    var newUserOptions = {
      Email: self.emailInput(),
      PhoneNumber: self.phoneInput(),
      ConferenceId: conferenceId
    };
    users.push(ConferenceUser.create(newUserOptions));
    self.clear();
  };

  this.edit = function(user) {
    self.editing(user);

    self.phoneInput(user.PhoneNumber());
    self.emailInput(user.Email());
  };

  this.reset = function() {
    self.editing(null);
    self.clear();
  };

  this.save = function() {
    var currentUser = self.editing();

    currentUser.Email(self.emailInput());
    currentUser.PhoneNumber(self.phoneInput());

    self.reset();
  };

};

var ConferenceUser = function(user) {
  this.Email = ko.observable(user.Email);
  this.PhoneNumber = ko.observable(user.PhoneNumber);

  this.ConferenceId = user.ConferenceId;
  this.Id = user.Id;
  this.Name = user.Name;
};

ConferenceUser.create = (function() {
  var id = 0;

  return...