JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<p>Click on an existing user data to edit it.</p> 
<p>Clicking the update button should update the clicked user data from the inputs in the list (this is not working).</p>
<div class="container" data-bind="foreach: conferences">
  <div class="conf" data-bind="attr: { id : 'conf-' + props.Id }">
    <div class="add-user" data-bind="with: newUser">
      <input type="tel" placeholder="phone number" data-bind="value: phoneInput" />
      <input type="email " placeholder="email" data-bind="value: emailInput" />
    </div>
    <button class="add" data-bind="click: function () { addUser(props.Id) }">Add</button>
    <button class="update" data-bind="click: function () { updateUser() }">Update</button>
    <a class="cancel" data-bind="click: function () { cancelUpdate(props.Id) }">CANCEL</a>

    <ul class="conf-users " data-bind="foreach: users ">
      <li class="conf-user " data-bind="attr: { id: 'confuser-' + ConferenceId}, click: $parent.selectUser">
        <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>

CSS

.conf-user:hover{
  background:#ccc;
}
.conf-user{
  cursor:pointer;
  width:300px;
  list-style-type: none;
  border-bottom:1px solid #ccc;
  padding: 5px;
  height:30px;
}
.update{
  display:none;
  background: blue;
  color:white
}
.cancel{
  display:none;
  cursor:pointer;
}
.add-user {
    float: left;
}

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 i = 0;

var ConferenceUser = function (user) {
    this.ConferenceId = ko.observable(user.ConferenceId);
    this.Email = ko.observable(user.Email);
    this.Id = ko.observable(user.Id);
    this.Name = ko.observable(user.Name);
    this.PhoneNumber = ko.observable(user.PhoneNumber);
}; 

var Conference = function(conferenceJSON) {
  var self = this;
  
  this.props = conferenceJSON;
	//the below plain object is currently being used to bind the users instead of conferenceUsers, line 115
  this.users = ko.observableArray(conferenceJSON.ConferenceUsers);
  
  // New user input form values
  this.newUser = {
    phoneInput: ko.observable(""),
    emailInput: ko.observable("")
  };

  this.addUser = function(confId) {
  	i++;
    // This adds the user to the current conference client-side and updates the UI
    self.users.push({
      PhoneNumber: self.newUser.phoneInput(),
      Email: self.newUser.emailInput(),
      Name: "",
      ConferenceId: confId,
      Id: i
    });
    
     self.newUser.emailInput("");
     self.newUser.phoneInput("");
  };
  
  this.updateUser = function () {
  
  };
  
   this.selectUser = function (viewModel, event) {
   
       ...