JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<select data-bind="options: AllCourses,
                   optionsText: 'CourseName',
                   optionsValue: 'Id'"></select>

<h2>Enrolled Students</h2>
<table>
    <thead>
        <tr>

            <th></th>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: EnrolledStudents">
       <tr >
           <td><button data-bind="click: $parent.remove">Remove</button></td>
           <td data-bind="text: StudentId"></td>
           <td data-bind="text: FirstName"></td>
           <td data-bind="text: LastName"></td>
       </tr>
    </tbody>
</table>

<h2>All Students</h2>
<table>
    <thead>
        <tr>
            <th></th>
            <th>StudentID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: AllStudents">
       <tr>
           <td><button data-bind="click: $parent.add,visible: !$parent.isEnrolled($data)">Add</button></td>
           <td data-bind="text: StudentId"></td>
           <td data-bind="text: FirstName"></td>
           <td data-bind="text: LastName"></td>
       </tr>
    </tbody>
</table>

JavaScript

var students = [{"$id":"1","Id":1,"FirstName":"Joe","LastName":"User","StudentId":1234567},{"$id":"2","Id":2,"FirstName":"Betty","LastName":"Rogers","StudentId":2345678},{"$id":"3","Id":3,"FirstName":"Steven","LastName":"Sanders","StudentId":3456789}];

var courses = [{"$id":"1","Id":1,"CourseName":"CptS 122"},{"$id":"2","Id":2,"CourseName":"CptS 223"}];

function AppViewModel() {
      
                this.AllStudents = ko.observableArray(students);
                this.AllCourses = ko.observableArray(courses);
                this.EnrolledStudents = ko.observableArray();
                this.CurrentCourse = ko.observable("1");
             
                
                var self = this;

                this.add = function (item) {
                 
                    self.EnrolledStudents.push(item);
                }

                this.remove = function (item) {
                
               
                    self.EnrolledStudents.remove(item);
                }

                this.isEnrolled = function (item) {
                    console.log(item);
                    var index = $.inArray(item, self.EnrolledStudents);
                    if (index > -1) {
                        return true;
                    }
                    return false;
                }

          
                
               
  
            }

            ko.applyBindings(new AppViewModel());